前言:微信小程序跟vue.js有很多相似点,也有很多不同点。例如在事件传值上就有很大区别。
一、问题还原
<!-- test.wxml -->
<view class="content">
<button wx:for="{{buttonList}}"
wx:key="{{item}}"
bindtap="getIndex(index)">
{{item}}
</button>
</view>
//test.js
Page({
data:{
buttonList: ['btn1', 'btn2', 'btn3', 'btn4',]
},
getIndex: function(index){
console.log(index)
}
});
运行结果:
在vue.js中,我们可以直接通过上面代码一样,在事件函数中传参。而在小程序中,并不能这样传参,而且控制台还会发出警告。
二、解决方案
<!-- test.wxml -->
<view class="content">
<button wx:for="{{buttonList}}"
wx:key="{{item}}"
data-index="{{index}}"
bindtap="getIndex">
{{item}}
</button>
</view>
//test.js
Page({
data:{
buttonList: ['btn1', 'btn2', 'btn3', 'btn4',]
},
getIndex: function(event){
console.log(event);
console.log(event.currentTarget.dataset.index);
}
});
运行结果:点击btn1
像这样,通过event事件对象,可以访问 event.currentTarget.dataset对象,而里面的键名就是我们在标签上添加的"data-"属性,值就是我们添加的值了。
|
请发表评论