当 switch 组件在 v-for 循环中, 某个具体 switch 发生变化时会触发 switch 组件的 @change 事件,我们可以利用 dataset 属性标注组件索引,在事件对应的逻辑中利用 dataset 属性获取到组件的索引,从而更精准的控制他们。
举一反三 : 其他组件也可以使用此处方法进行识别。
<组件 data-属性名称 ... >
e.currentTarget.dataset.属性名称
<template>
<view>
<view style="margin-top:80rpx;">
<switch
:data-idx="idx"
v-for="(item, idx) in [1,2,3,4,5]"
checked
@change="switchChange" />
</view>
</view>
</template>
<script>
var graceJS = require('@/GraceUI5/js/grace.js');
export default {
data() {
return {}
},
methods:{
switchChange:function(e){
console.log(e);
// 利用dataset 获取索引
var idx = e.currentTarget.dataset.idx;
console.log('当前 switch 索引为 : ' + idx);
// 获取到索引即可通过索引进行更多逻辑代码编写
}
}
}
</script>
<style>
</style>