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
英文地址，請注明出處：http://en.pswp.cn/diannao/87730.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！