[Vuejs]-Sending data from vue-select to another object

by

0👍

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>

0👍

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>

Leave a comment