有数据,把数据传入点击事件打印出来是undefined, 因为key是undefined
程序员文章站
2022-07-14 19:51:19
...
:key很关键,如果 :key 是undeifined, 那么 toggle 事件传入的 item 打印出来将会是 undefined
<view class="cu-list-content" v-for="(item, index) in products" :key="item.id">
{{JSON.stringify(item)}}
<view class="cu-item" @tap="toggle(item)">
<view class="content">
<text class="text-cut">{{item.productName}} </text>
</view>
</view>
<view class="productInfo" :class="item.show?'show':'hide'">
<view class="productItem">{{item.productTypeName }} </view>
<view class="productItem">宽度:{{item.width }} 毫米</view>
<view class="productItem">长度:{{item.height }} 毫米</view>
</view>
</view>
data() {
return {
products : [{
show:false,
url :'',
productName : '[平开窗推拉平柜重型系列60]',
productTypeName: '--',
num:1,
productTypeName : '[平开窗推拉平柜重型系列60]',
width : '1000 毫米',
height : '1000 毫米',
outerColorName:'宫廷白',
innerColorName:'宫廷白',
handleMode:'斯高执手',
glassType :'磨砂玻璃',
remark:"--"
}, {
show:false,
url :'',
productName : '[平开窗推拉平柜重型系列60]',
productTypeName: '--',
num:1,
productTypeName : '[平开窗推拉平柜重型系列60]',
width : '1000 毫米',
height : '1000 毫米',
outerColorName:'宫廷白',
innerColorName:'宫廷白',
handleMode:'斯高执手',
glassType :'磨砂玻璃',
remark:"--"
}, {
show:false,
url :'',
productName : '[平开窗推拉平柜重型系列60]',
productTypeName: '--',
num:1,
productTypeName : '[平开窗推拉平柜重型系列60]',
width : '1000 毫米',
height : '1000 毫米',
outerColorName:'宫廷白',
innerColorName:'宫廷白',
handleMode:'斯高执手',
glassType :'磨砂玻璃',
remark:"--"
}]
}
},
methods: {
toggle(item) {
console.log('item :>> ',item)
}
}
原因:
解决方法:
- 自己 遍历 products ,给每一个 item 添加值不重复的 id 字段;
- v-for="(item, index) in products" :key=“index”
上一篇: 将welcome to bit !依次向中心靠拢打印出来
下一篇: Android中的SVG资源