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

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.Currency}}
{{Record.Country}

下面是它在网页上的外观

当我这样尝试时，

Record.Country.Name

没有显示任何内容

---

您能提出建议吗？

看起来您在“记录”列中对数据进行了字符串化。试试这个：

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

{{JSON.parse（Record.Currency.Code}}
{{JSON.parse（Record.Country.Name}