如何在Vue.js模板的for循环中展示嵌套JSON数据属性

嘿，我瞅了下你的问题和数据结构，发现核心问题是：Country和Currency字段并不是原生的JavaScript对象——它们是被字符串序列化后的JSON字符串！所以你直接在Vue模板里访问item.Country.Name肯定拿不到预期的值，得先把这些字符串转成可访问的对象才行。下面给你两种靠谱的解决办法：

方法一：数据获取后预处理（推荐） #

这种方法是在拿到数据后，先把字符串化的JSON转成对象，之后模板里就可以像普通对象一样访问属性了，性能也更好（不用每次渲染都重复解析）。

假设你是通过接口请求拿到的目标数据，在处理响应的时候做如下转换：

// 假设response.data就是你提供的那个JSON对象
this.MembershipRecords = response.data.Data.map(item => {
  try {
    return {
      ...item,
      // 把字符串转成JS对象
      Country: JSON.parse(item.Country),
      Currency: JSON.parse(item.Currency)
    }
  } catch (err) {
    // 加个异常处理，避免格式错误导致页面崩溃
    console.error('解析JSON失败:', err)
    return item
  }
})

之后你的模板就可以正常遍历访问属性了：

<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, idx) in MembershipRecords" :key="idx">
      <!-- 直接访问解析后的对象属性 -->
      <td>{{ record.Currency.Code }} {{ record.Currency.Symbol }}</td>
      <td>{{ record.Country.Name }} ({{ record.Country.Code }})</td>
    </tr>
  </tbody>
</table>

方法二：使用Vue过滤器（适合临时场景） #

如果你不想修改原始数据结构，可以定义一个过滤器来实时解析JSON字符串。这种方法适合数据量小的场景，因为每次渲染都会重复解析字符串，性能不如预处理。

首先在Vue组件里定义过滤器：

export default {
  // ...其他组件选项
  filters: {
    parseJson: function(jsonStr) {
      try {
        return JSON.parse(jsonStr)
      } catch (err) {
        console.error('JSON解析失败:', err)
        return '解析错误'
      }
    }
  }
}

然后在模板里使用过滤器：

<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, idx) in MembershipRecords" :key="idx">
      <!-- 通过过滤器解析后访问属性 -->
      <td>{{ (record.Currency | parseJson).Code }} {{ (record.Currency | parseJson).Symbol }}</td>
      <td>{{ (record.Country | parseJson).Name }} ({{ (record.Country | parseJson).Code }})</td>
    </tr>
  </tbody>
</table>

注意事项 #

• 一定要加try-catch处理！如果后端返回的字符串格式有问题（比如少了引号、语法错误），JSON.parse会抛出异常，导致页面渲染失败。
• 优先选择方法一，尤其是数据量大的时候，避免重复解析带来的性能损耗。

内容的提问来源于stack exchange，提问作者Pankaj