我在 v-select 中創(chuàng)建一個下拉菜單，在單擊清除按鈕時選擇一個選項后，我需要清除下拉菜單并將選項數(shù)組更改為初始階段。
如何檢查清除按鈕（x）是否被單擊，我嘗試使用 on-change 用于獲取所選值，它工作正常，而 @click 等都不起作用，請幫助我。
<template>
<v-select
v-model="selected"
:reduce="(option) => option.id"
:options="[
{ label: 'One', id: 1 },
{ label: 'Two', id: 2 },
]"
@onChange="searchProduct"
/>
</template>
<script>
export default {
data() {
return {
selected: 3,
}
},
methods(){
searchProduct(selected){
console.log('selected value ',selected)
}
}
</script>
我期待一些方法來處理下拉清除事件。
1
0
0
由于我們還沒有任何顯式的事件，因此我們可以通過觀察v-model值來實現(xiàn)此要求。
watch: {
selected(value) {
if (!value) {
// Your logic here
}
}
}
根據(jù)要求進(jìn)行現(xiàn)場演示：
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
selected: 3
},
watch: {
selected(value) {
if (!value) {
this.selected = 3;
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/3.10.3/vue-select.js"></script>
<link rel="stylesheet" />
<div id="app">
<v-select
v-model="selected"
:reduce="(option) => option.id"
:options="[
{ label: 'One', id: 1 },
{ label: 'Two', id: 2 },
]"
/>
</div>
