为Vue.js模板的每个循环显示JSON数据属性

Question

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时，它什么也没显示。

你能建议吗？

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