Question

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

 <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":""
        },
     }
    }

Answer 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>

Vue，JS从JSON显示数据

1 个答案: