我在 v-select
中创建一个下拉菜单,在单击清除按钮时选择一个选项后,我需要清除下拉菜单并将选项数组更改为初始阶段。
如何检查清除按钮(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>
我期待一些方法来处理下拉清除事件。
P粉3114649352023-12-28 09:43:47
由于我们还没有任何显式的事件
,因此我们可以通过观察v-model
值来实现此要求。
watch: { selected(value) { if (!value) { // Your logic here } } }
根据要求进行现场演示:
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" href="https://unpkg.com/vue-select/dist/vue-select.css"/>
<div id="app">
<v-select
v-model="selected"
:reduce="(option) => option.id"
:options="[
{ label: 'One', id: 1 },
{ label: 'Two', id: 2 },
]"
/>
</div>