将数据从 vue-select 发送到另一个对象答案

【问题标题】：Sending data from vue-select to another object将数据从 vue-select 发送到另一个对象
【发布时间】：2021-10-13 07:39:28
【问题描述】：

我正在使用 vue-select 在我的 vue 应用程序中使用 select 进行搜索。比如我在vue-select中点击一个选项，它会在另一个对象中发送给我，在选择器之后消失。

我怎么能这样做？我做了类似的事情，但是不行

Selector
 <v-select 
  v-model="value" 
  :options="dataTags" 
  multiple 
  @click="onAdd()"
 placeholder="Select your data">
</v-select>

<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 和标签。那么如何继续将所选项目发送到新对象并使其从选择器中消失？我可以用某种方式隐藏它们吗？

【问题讨论】：

标签： javascript vue.js vue-select

【解决方案1】：

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>

【讨论】：

【解决方案2】：

也许尝试使用计算属性过滤选项：

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/vue-select@3.13.2/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>

【讨论】：