Vue,js 显示来自 json 的数据

【问题标题】：Vue,js Display data from jsonVue,js 显示来自 json 的数据
【发布时间】：2018-12-28 15:33:43
【问题描述】：

如何从以下结果中获取产品名称。我试过了

 <div class="card-divider">
            {{ post.basic_info.prod_name }}
</div>

但它不起作用

非常感谢

     {
     "name":"Test ProductCategory",
     "updated":"2018-07-16 15:00:03",

     "12":{
      "basic_info":{
         "prod_name":"Product name 1",
         "status":"Active",
         "image":""
      },
     },
     "13":{
        "basic_info":{
         "prod_name":"Product name 2",
         "status":"Active",
         "image":""
        },
     }
    }

【问题讨论】：

向我们展示您的脚本代码
也许你这里没有使用 v-for。向我们展示您的代码。
另外，你有两个同名的键"12":，你的代码还不够回答！
方法：{ getPostsViaREST: function() { axios.get("localhost/learning-vue-js/data/455.json") .then(response => {this.posts = response.data}) }
@Zam85 发布您的完整代码

标签： vue.js vuejs2

【解决方案1】：

试试这个：

{{ post["12"].basic_info.prod_name }}

您的 JSON 有两个相同的密钥，因此您只会收到 Product name 2，因为后者将替换之前的密钥 "12"

我的建议，修改数据以接收如下内容：

{
    "name":    "Test ProductCategory",
    "updated": "2018-07-16 15:00:03",
    "data":    [
        {
            "basic_info": {
                "prod_name": "Product name 1",
                "status":    "Active",
                "image":     ""
            },
        }, {
            "basic_info": {
                "prod_name": "Product name 2",
                "status":    "Active",
                "image":     ""
            },
        }
    ]
}

您可以遍历data 并获取basic_info.prod_name 然后您的html 将是：

<div class="card-divider"  v-for="obj in post.data">
    {{ obj.basic_info.prod_name }}
</div>

【讨论】：

@Zam85 你明白了吗？