key=“item.id“ 报这个错误,改成 :key=“index“ 就好了

testData: [  
                { id: 1, title: '测试1' },  
                {  
                    id: 2,  
                    title: '测试2'  
                },  
                {  
                    id: 3,  
                    title: '测试3'  
                }  
            ]  

<view class="" v-for="n in 10" :key="n" @tap="testTap(n)">{{ n }}</view>  
<view class="" v-for="item in testData" :key="index" @tap="testTap2(item)">{{ item.title }}</view>  

testTap(item) {  
            console.log(item);  
直接报错: //VM3859:1 thirdScriptError  
Cannot read property '2' of undefined; [Component] Event Handler Error @ pages/cost-list/cost-list#handleEvent  
TypeError: Cannot read property '2' of undefined  
        },  

        testTap2(item) {  
            console.log(item);  
打印 //undefined  
        },

uni-app 小程序端 v-for循环绑定事件@event="func(item)"传值触发时打印item为undefined

使用 :key="item.id" 报这个错误,但是 data-id="item.id" 中有值。按照你这个方法把 :key="item.id" 改成 :key="index" 就好了

<template> <div> <div v-for="(item, index) in items" :key="index" class="row"> <button :disabled="!start || !item.checked" @click="clickButton(index, item.delay)" :class="{ active: item.active }" > Button {{ index + 1 }} <span v-if="item.active" class="click-animation"></span> </button> <input type="checkbox" v-model="item.checked" :disabled="!start"/> </div> <button :class="{ start: start, stop: !start }" @click="startStop">{{ start ? 'Stop' : 'Start' }}</button> </div> </template> <script> export default { data () { return { items: [ {checked: false, delay: 100, active: false}, {checked: false, delay: 200, active: false}, {checked: false, delay: 300, active: false}, {checked: false, delay: 400, active: false} ], start: true, intervalIds: [] } }, methods: { clickButton (index, delay) { this.items[index].active = true setTimeout(() => { console.log(`Clicked button ${index + 1}`) this.items[index].active = false }, 100) if (this.items[2].checked) { setTimeout(() => { console.log('Clicked button 1 of the third row') }, delay) setTimeout(() => { console.log('Clicked button 3 of the third row') }, delay + 300) } }, startStop () { this.start = !this.start if (this.start) { this.intervalIds.forEach((id) => clearInterval(id)) } else { this.intervalIds = this.items.map((item, index) => { if (item.checked) { return setInterval(() => { this.clickButton(index, item.delay) }, item.delay) } else { return null } }) } } } } </script>如何将第一行按钮的挨骂也改成点击开始和每0.1秒执行一下
05-27
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值