在uniapp中使用组件，需要传递额外的参数

最新推荐文章于 2024-08-18 11:58:39 发布

m0_63466615

最新推荐文章于 2024-08-18 11:58:39 发布

阅读量1.4k

点赞数 5

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_63466615/article/details/124061109

版权

本文探讨如何在使用Vue Switch组件时，通过事件处理函数正确传递索引以同步Vuex状态。作者分享了在事件参数中处理索引与事件对象冲突的方法，以及模板中使用v-for遍历数据并传递index的实例代码.

摘要由CSDN通过智能技术生成

理解

例如这个复选框是用switch做的，当switch状态改变的时候，我需要把对应的vuex里的数据的选中状态也改变，因为购物车的数据必定是一个数组，所以我想要修改里边某一个元素的一个变量的值的时候，我需要得到我点的那个的索引值

但是由于这个switch组件它

这个change事件里就带一个event,如果这样传index的话

在方法区

switchChange(event,index){},

由于是按照位置来传递参数的，index就会顶替掉event，那么就不能通过 event.detail.value 得到当前复选框的状态，所以这样传索引值的不可行的

正确的方法应该是

<template v-for="(item,index) in carData">
	<view class="carItem flex fl-a-center fl-j-b margin-bottom20 padding20">
	    <switch 
          type="checkbox"
          :checked="item.isChecked"         
          @change="event=>switchChange(event,index)" /> //这样传递参数
	    <image :src="item.mainImage[0]" class="image" ></image>
	    <div class="info">
			<div class="te-large">{{item.title}}</div>
			<div class="te-i-color te-small">{{item.subTitle}}</div>
			<div class="price">￥{{item.presentPrice}}</div>
	    </div>
	    <spinner :count="item.buyCount" @abc="event=>getNum(event,index)"></spinner>
	</view>
</template>