javascript—在vuejs中打印json的属性

x6492ojm  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(416)

我想在我的vuejs代码中读取json数据。
这是我的代码:

<template>
 {{info}}
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      info: null
    };
  },
  mounted(){
    axios
      .get('data/products.json')
      .then(response => (this.info = response.data.data)),
  }
</script>

我在网站上看到:
[{“id”:“1000”,“代码”:“1”,“名称”:“证书”,“描述”:“证书描述”,“状态”:“错误”},{“id”:“1005”,“代码”:“2”,“名称”:“autre”,“描述”:“产品描述”,“状态”:“错误”}]
我希望能够仅调用info.id来打印id,或者将其用作v-if或v-for中的属性。
例如,你可以做这样的事情:

<div :v-for="number in info.id">
   {{number}}
 </div>

你知道怎么做吗?
谢谢

wqlqzqxt

wqlqzqxt1#

<div v-for="infoItem in info" :key="infoItem.id">
    {{ infoItem.id }}
 </div>

另一种只显示错误ID的解决方案是

<div v-for="infoItem in info" :key="infoItem.id">
      <div v-if="infoItem.status === 'ERROR'"
        {{ infoItem.id }}
      </div>
    </div>

将v-for和v-if组合在同一行中是不好的做法。

qqrboqgw

qqrboqgw2#

我建议您更改v-for循环,并引用您想要访问的任何键

<div :v-for="item in info">
   {{ item.id }}
    {{ item.name }}
</div>

等等

相关问题