我正在使用 vue-select 在我的 vue 應用程式中使用 select 進行搜索。比如我在vue-select中點擊一個選項時，它會在另一個物件中發送給我，在選擇器之后消失。
我怎么能那樣做？我做了類似的事情，但不行
Selector
<v-select
v-model="value"
:options="dataTags"
multiple
@click="onAdd()"
placeholder="Select your data">
</v-select>
JS
<script>
export default {
props: {
dataTags: {
type: Object,
required: true
}
},
data() {
return {
value: '',
Items: {
selected_items: []
}
}
},
methods: {
onAdd() {
this.Items.selected_items.push(this.value);
this.value = '';
}
}
}
</script>
資料標簽只是這些標簽的陣列，沒什么特別的。它基于 id 和標簽。那么如何將所選專案發送到新物件并使它們從選擇器中消失呢？我可以以某種方式隱藏它們嗎？
uj5u.com熱心網友回復：
vue-select發出一個名為的事件input，它可以為您提供選定的值。請參閱檔案的這一部分，在“事件：輸入”下https://vue-select.org/guide/values.html#getting-and-setting
那么它會是這樣的：
<v-select
v-model="value"
:options="dataTags"
multiple
@input="onAdd"
placeholder="Select your data">
</v-select>
uj5u.com熱心網友回復：
也許嘗試使用計算屬性過濾選項：
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
currentlySelected: null,
options: ['aaaaa', 'bbbbb', 'ccccc'],
usedOptions: []
},
methods: {
select(value) {
this.usedOptions.push(value)
this.currentlySelected = null
}
},
computed: {
filteredOptions() {
return this.options.filter(option => !this.usedOptions.includes(option))
}
}
})#app {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 2rem;
}<link href="https://unpkg.com/vue-select/dist/vue-select.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/vue-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<v-select v-model="currentlySelected" :options="filteredOptions" @input="select"></v-select>
already used: {{usedOptions}}
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/311101.html
標籤：javascript Vue.js 选择