Estoy usando vue-select para realizar una búsqueda con select en mi aplicación vue. Por ejemplo, cuando hago clic en una opción en vue-select, se me enviará en otro objeto y desaparecerá después del selector.
¿Cómo podría hacer eso? yo hice algo asi pero no esta bien
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>Y las etiquetas de datos son solo una matriz de esas etiquetas, nada especial. Se basa en una identificación y una etiqueta. Entonces, ¿cómo puedo proceder para enviar los elementos seleccionados a un nuevo objeto y hacerlos desaparecer del selector? ¿Puedo ocultarlos de alguna manera?
vue-select emite un evento llamado input que puede darle el valor seleccionado. Consulte esta sección de la documentación, en "Evento: entrada" https://vue-select.org/guide/values.html#getting-and-setting
Sería algo así entonces:
<v-select v-model="value" :options="dataTags" multiple @input="onAdd" placeholder="Select your data"> </v-select>Tal vez intente filtrar las opciones usando una propiedad calculada:
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>