迭代多个 json 对象并使用 vue.js 在 div 中显示它们时出现问题

Question

试图创建一个从 API 获取信息的网站，但是我真的不知道该怎么做，因为我需要将所有结果分组，而我创建的 API 几乎从不对相同数量的对象做出响应. 所以问题是，看到我使用 vue.js 和 axios 是否有任何方法可以遍历 json 对象以单独显示每个对象？ 当有指定的数量时，我设法做到这一点，但我想让它动态化，所以我不会硬编码到变量中，我需要为每个变量设置响应的哪一部分。

更新：我尝试过使用 v-for，但看到我需要让输出结构化它并没有真正帮助，我也尝试过嵌套的 V-for 循环，我又一次无法获得准确性我正在寻找。

UPDATE2：还应该添加，当我说 JSON 对象时，我实际上提到了 js 对象。 json.parse() 已在 json 上使用。

UPDATE3：将 JSON 更新为我用于应用程序的实际数据。 每个 div 都需要一个引理、一个范式标记集、屈折标记集和屈折形式，以及一个包含所有含义的表格。 只需要意义而不是意义文本。 TranslationId 并不重要。 包装每个对象的 JTranslate 将被删除，目前对 Java 有点厌倦，今天晚些时候会这样做，并对 vue 项目进行调整以及删除。

Answer 1

其实你的json格式是无效的

{ "object1":{ "name": "test", "data": "test" }, "object2":{ "name": "test2", "data": "test2" }, "object3":{ "name": "test2", "data": "test2" } }

它应该像上面一样并使用 JSON.parse() 方法简单地将 json 转换为 javascript 对象

Answer 2

有效对象：

var objects = {
  "object1":{
    "name": "test",
    "data": "test"
  },
 "object2":{
    "name": "test2",
    "data": "test2"
  },
 "object3":{
    "name": "test2",
    "data": "test2"
  }
}

用于迭代使用

  <div v-for="(object,index) in objects" :key="index">
        {{object}}
  </div>

Answer 3

作为数组的正确对象：

 test: [
    {
      object1: {
        name: 'name1',
        data: 'content1'
      }
    },
    {
      object2: {
        name: 'name1',
        data: 'content1'
      }
    },
    {
      object3: {
        name: 'name3',
        data: 'content3'
      }
    }
  ]

可以映射为脚本标签内的计算属性：

  computed: {
mappedTest() {
  return this.test.map(entry => {
    const key = Object.keys(entry)[0];
    return { name: entry[key].name, data: entry[key].data };
  });
}

},

并在模板中调用它

  <div
    v-for="testObject in mappedTest"
    :key="testObject"
  >
    name: {{testObject.name}}; data: {{testObject.data}}
  </div>

Answer 4

问这个问题的时候我很累，显然我做错了一切。 可以通过嵌套v-for循环轻松解决。