在 VUEJS 中打印 JSON 的属性答案

【问题标题】：Print attributes of a JSON in VUEJS在 VUEJS 中打印 JSON 的属性
【发布时间】：2021-09-21 09:31:36
【问题描述】：

我想在我的 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", "code": "1", "name": "Certificats", "description": “证书描述”，“状态”：“错误”}，{“id”：“1005”，“代码”：“2”， “名称”：“Autre”，“描述”：“产品描述”，“状态”： “错误”}]

我希望能够仅调用例如 info.id 以仅打印 id 或将其用作 v-if 或 v-for 中的属性。

例如能够做这样的事情：

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

你知道怎么做吗？

谢谢

【问题讨论】：

标签： javascript html json vue.js vuejs3

【解决方案1】：

 <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 组合在同一行中是不好的做法。

【讨论】：

【解决方案2】：

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

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

等等。

【讨论】：