javascript—在vuejs中打印json的属性

x6492ojm 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(417)

我想在我的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>

你知道怎么做吗？
谢谢

JSON vue.js JavaScript Html vuejs3

来源：https://stackoverflow.com/questions/68343586/print-attributes-of-a-json-in-vuejs

2条答案

按热度按时间

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

赞(0）回复(0）举报 2021-09-13

qqrboqgw2#

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

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

等等

赞(0）回复(0）举报 2021-09-13

我来回答

javascript—在vuejs中打印json的属性

2条答案

相关问题

热门标签

最新问答