当 switch 组件在 v-for 循环中时,识别取当前变化的 switch

背景

当 switch 组件在 v-for 循环中, 某个具体 switch 发生变化时会触发 switch 组件的 @change 事件,我们可以利用 dataset 属性标注组件索引,在事件对应的逻辑中利用 dataset 属性获取到组件的索引,从而更精准的控制他们。

举一反三 : 其他组件也可以使用此处方法进行识别。

设置 dataset 语法

<组件 data-属性名称 ... >

获取 dataset 语法

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>