一般人会报错这个:wx:key=“{{index}}“ does not look like a valid key name (did you mean wx:key=“index“ ?)
官方文档
首先我们回顾官方wx:for的使用模式
wx:for
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。
如果数组需要进行curd操作,不建议使用index作为key值,会导致回流。
例子
<!--
arr = [
{a:1,b:2,id:1},
{a:3,b:4,id:2},
]
-->
<view wx:for="{{arr}}" wx:key="id" >
<text class="title">{{item.a}}</text>
</view>
解析:就是很操蛋的把数组内的item对象解构出来,直接再wx:key内使用,而且也不加双{},感觉新手就是容易误操作!
如果实在是测试用的数组没有id可以这样书写
<view wx:for="{{arr}}" wx:key="unique" >
<text class="title">{{item.a}}</text>
</view>