Vue解决select中给option添加点击事件时无法正常操作的问题

话不多说
代码敬上

描述问题:
目前的情况是我获取的数据用v-for渲染到option里了 点击option传递index来获取到一个值来进行后续操作

<select name="" id="">
	<option  v-for="(item,index) in msgList" :key="index" @click="chooseCore(index)">{{item.name}}</option>
</select>

起初我是想在点击时获取到当前的index以方便接下来的获取数据和渲染等操作
但是在methods里写好chooseCore(index)方法之后发现连简单的console.log(1)都办不到
问题出现

解决办法

<select name="" id="" @change="chooseCore($event)">
	<option :value="index"  v-for="(item,index) in msgList" :key="index">{{item.name}}</option>
</select>

此时在select里绑定一个@change="chooseCore($event)“方法
在methods里

chooseCore(event){
	console.log(event.target.value)
}

即可获取到原本想获取的index值
问题解决

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值