Question

我在遍历Vue JS中json文件中的数据时遇到麻烦。我已经完成所有设置并可以访问json。我在这里想念什么：

JSON

{
  "test": "example",
  "data": [
    {
      "name": "My Name",
      "address": "My Address"
    }
  ]
}

Vue JS html

{{ someData['name'] }}

<ul>
  <li v-for="item in someData" v-bind:key="item.id">
    {{ item }}
  </li>
</ul>

和我的脚本：

created() {
    this.$http.get('http://localhost:3000/properties.json').then(response => {
      // get body data
      this.someData = response.body
    }, response => {
      // error callback
    });
  }

我得到的结果是：

Result

如您所见，在我的v-for中，简单地指定项目会抓住这里的每个项目，但是我希望能够做类似{{item ['name']}}和{{item ['address ']}}

Answer 1

主要问题出在JSON文件中。 VueJS v-for正在遍历JSON文件中的键，在这种情况下{{item}}将获得名称和地址。这就是输出的原因。

要解决这个问题...

将JSON文件格式设置为

[{name: 'John', address: 'Jane'}]

这样做，您的VueJS v-for将遍历JSON数组，并且{{item}}将获得值{name：'John'，address：'Jane'}，现在您可以执行{{item.name} } {{item.address}}

示例here

编辑：更新您的API请求代码

created() {
    this.$http.get('http://localhost:3000/properties.json').then(response => {
      // get body data
      this.someData = [response.body]
    }, response => {
      // error callback
    });
  }

Answer 2

您可以简单地执行以下操作：

<template v-for="(item, key) in someData">
  <span v-if="key == 'address'">{{item}}</span>
</template>

Answer 3

关键点在于v-for="item in someData"对象在组件视图iterates over values中的someData部分，即"John"和"Jane"。

根据您的确切目标，您应该将JSON重新格式化为对象数组（如@ F.bernal所建议），或者更改v-for指令的逻辑。

使用Vue JS从API中获取数据时出现问题

3 个答案: