Vue.js解析JSON至HTML表格遇异常 求技术指导

嘿，我来帮你拆解下你遇到的问题根源，以及对应的解决办法～

1. 两个异常现象的核心原因 #

你遇到的两个问题，本质都是数据格式不匹配导致的：

• 当你用<td>{{item.id}}</td>时显示空行：因为你给products数组赋值的是一个字符串"{id: 'mu'}"，而不是真正的JavaScript对象。Vue遍历字符串时会把它拆成单个字符，每个字符没有id属性，所以渲染出来就是空内容。
• 改为<td>{{item}}</td>后打印单个字符：同样是因为products被赋值了字符串，v-for遍历字符串时会将其视为「字符数组」，逐个取出每个字符渲染，比如你的字符串会被拆成{、i、d、:、'm'这些单个字符。

另外补充一点：你写的"{id: 'mu'}"也不是标准JSON格式（标准JSON的键名和字符串必须用双引号），但这不是最核心的问题，核心是你把字符串当成了数组/对象来用。

2. 正确的解决步骤 #

步骤1：修正数据格式与赋值方式 #

你的products定义的是数组，所以需要给它赋值包含对象的数组，而不是字符串：

• 如果是直接硬编码数据，应该写成：

var app4 = new Vue({
  el: '#Itemlist',
  data: {
    products: [{ id: 'mu' }] // 数组里包含一个对象，而非字符串
  },
  // 你的mounted等其他代码
})

• 如果是从外部获取的JSON字符串，需要先解析成JavaScript对象再放到数组里：

// 假设你拿到的是标准JSON字符串
const jsonStr = '{"id": "mu"}';
const productObj = JSON.parse(jsonStr);

var app4 = new Vue({
  el: '#Itemlist',
  data: {
    products: [productObj] // 把解析后的对象放入数组
  },
  // ...
})

步骤2：完善v-for的写法 #

建议给v-for加上key属性（Vue要求循环项要有唯一标识，避免渲染异常），最终的表格代码可以改成：

<tr v-for="(item, index) in products" :key="index">
  <td>{{item.id}}</td>
</tr>

完整测试示例 #

你可以用这段代码验证效果：

<div id="Itemlist">
  <table border="1">
    <tr v-for="(item, index) in products" :key="index">
      <td>{{item.id}}</td>
    </tr>
  </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app4 = new Vue({
  el: '#Itemlist',
  data: {
    products: [{ id: 'mu' }]
  }
})
</script>

这样就能正常渲染出包含mu的单元格啦～

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