Sending data from vue-select to another object

Question

I'm using vue-select to have a search with select in my vue application. For example, when I click on an option in vue-select, it will be sent to me in another object and it will disappear after the selector.

How could I do that? I did something like that but it's not ok

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>

And data tags are just an array of those tags, nothing special. It is based on an id and tag. So how can I proceed to send the selected items to a new object and make them disappear from the selector? Can I hide them in some way?

Answer 1

vue-select emits an event called input which can give you the selected value. See this section of the documentation, under "Event: input" https://vue-select.org/guide/values.html#getting-and-setting

It would be something like this then:

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

Answer 2

Maybe try filtering the options using a computed property:

 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>