Vue使用v-for指令渲染列表始终触发报错的异常问题

核心是v-for指令语法书写错误，和使用的Vuetify、TypeScript技术栈无关：

• 代码中<li>标签上写的是:v-for="item in items"，v-for前多了冒号。Vue中冒号是v-bind的简写，作用是给标签绑定动态属性值，而v-for是内置结构型指令，不需要加绑定前缀。
• 加了冒号后Vue不会将该属性识别为循环指令，不会生成对应的循环作用域，模板访问item.message时，会因为当前作用域不存在item变量直接抛出引用错误。
• 原写法同时缺少v-for强制要求的唯一key属性，即使修正指令写法，也会触发Vue的规范警告。

1. 移除v-for前多余的冒号，将:v-for改为标准v-for写法
2. 给循环渲染的节点绑定唯一key属性，符合Vue虚拟DOM Diff算法的规范要求

修复后的对应列表代码：

<ul id="example-2">
  <li v-for="(item, index) in items" :key="index">
    {{ item.message }}
  </li>
</ul>

如果数组项有全局唯一的标识字段（比如业务id），优先用唯一标识作为key值，渲染性能更好：

<li v-for="item in items" :key="item.id">
  {{ item.message }}
</li>

报错效果参考：

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