vue3 select 选中值时，即获得id，也获得name值并且输入框正确选中

1.获取 name和id

直接绑定对象

将 value 绑定为整个对象，通过 @change 事件获取完整数据

value-key 绑定唯一标识

value 绑定为整个对象，通过 @change 事件获取完整数据

<el-select v-model="selectedItem" @change="handleChange"><el-optionv-for="item in options":key="item.id"value-key="id":label="item.name":value="item"/>
</el-select>

 handleChange(item) {console.log(item.id, item.name);  // 直接获取对象属性}

2.获取 name，id，索引

直接绑定对象 + 传递索引

通过 v-model 绑定整个对象,结合 @change 事件和 v-for 的 (item, index) 参数获取完整数据

value-key 绑定唯一标识

value 绑定为整个对象，通过 @change 事件获取完整数据

:value="{ ...item, index }"

<el-select v-model="selectedItem" @change="handleChange" value-key="id"
><el-optionv-for="(item, index) in options":key="item.id":label="item.name":value="{ ...item, index }"/>
</el-select>

methods: {handleChange(itemWithIndex) {console.log(itemWithIndex.id, itemWithIndex.name, itemWithIndex.index);}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/87730.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/87730.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！