在 Vue.js 模板的每个循环中显示 JSON 数据属性答案

【问题标题】：Show JSON Data property in for each loop of Vue.js Template在 Vue.js 模板的每个循环中显示 JSON 数据属性
【发布时间】：2018-10-14 02:35:13
【问题描述】：

JSON 数据

{  
   "Data":[  
      {  
         "Country":"{\"CountryID\":1,\"Name\":\"United States\",\"Code\":\"US\"}",
         "Currency":"{\"CountryID\":1,\"Code\":\"USD\",\"Symbol\":\"$\"}"
      },
      {  
         "Country":"{\"CountryID\":1,\"Name\":\"United States\",\"Code\":\"US\"}",
         "Currency":"{\"CountryID\":1,\"Code\":\"USD\",\"Symbol\":\"$\"}"
      }
   ]
}

Vue.js 代码

<table class="table table-bordered mb-0" v-if="MembershipRecords.length > 0">
    <thead>
        <tr>
            <th>Currency</th>
            <th>Country</th>                            
        </tr>
    </thead>
    <tbody>
        <tr v-for="Record in Records">
            <td>{{ Record.Currency }}</td>
            <td>{{ Record.Country }}</td>
        </tr>
    </tbody>
</table>

下面是它在网页上的外观。

当我尝试这样 Record.Country.Name 时，它什么也没有显示。

你能推荐一下吗？

【问题讨论】：

标签： vue.js

【解决方案1】：

您的记录列中似乎有字符串化数据。试试这个：

<tr v-for="Record in records">
  <td>{{ JSON.parse(Record.Currency).Code }}</td>
  <td>{{ JSON.parse(Record.Country).Name }}</td>
</tr>

https://jsfiddle.net/01ogLreg/

【讨论】：