在 VUEJS 中打印 JSON 的属性

Posted 2023-02-22

【中文标题】在 VUEJS 中打印 JSON 的属性

【英文标题】：Print attributes of a JSON in VUEJS

【发布时间】：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>

你知道怎么做吗？

谢谢

【参考方案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>

等等。