Hay 5 valores únicos para la variable de options del componente vue. Me gustaría que el usuario eligiera solo 1 valor para cada opción de selección que doy. es decir, tengo 5 componentes de select de entrada, quiero que el usuario seleccione solo 1 valor en cada componente que no puede ser utilizado por otro componente de select .
Por ejemplo
input one: [ orange, green, yellow, black, blue ] input two: [ orange, green, yellow, black, blue ] input tree: [ orange, green, yellow, black, blue ] input four: [ orange, green, yellow, black, blue ] input five: [ orange, green, yellow, black, blue ]Si el usuario selecciona naranja en la entrada uno, el usuario no puede volver a seleccionar naranja en las entradas 2 a 5.
He intentado crear 2 matrices manteniendo itemSelected[] y itemsAvailable[], sin embargo, no puedo resolver el problema.
¿Cómo resuelvo este problema en Vue 3 ?
Puede crear un componente para la selección y pasar los valores necesarios como parámetros:
const { ref, computed, watch } = Vue const app = Vue.createApp({ setup() { const items = ref(['orange', 'green', 'yellow', 'blue', 'purple']) const getItems = computed(() => items.value.filter(i => !selected.value.includes(i)) ) const selected = ref([]) const getSelected = (val) => { if(!selected.value.includes(val)) selected.value.push(val) } const reseted = ref(false) const reset = () => { selected.value = [] reseted.value = true } return { items, selected, getSelected, getItems, reset, reseted } } }) app.component('selComp', { template: ` <div :style="{color: selected}">Selected {{ idx + 1 }}: {{ selected }}</div> <select v-model="selected" @change="setSelected($event)"> <option disabled value="">Please select one</option> <option v-for="item in items" :key="item">{{ item }}</option> </select> `, props: ['items', 'idx', 'reseted'], setup(props, { emit }) { const selected = ref(null) const setSelected = (e) => { emit('select', e.target.value) } watch(() => props.reseted, () => { selected.value = null emit('cleared') }) return { selected, setSelected } } }) app.mount('#demo') .cont{ display: flex; flex-wrap: wrap; } <script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script> <div id="demo"> <div class="cont"> <div v-for="(item, i) in items.length" :key="i"> <sel-comp :items="getItems" :idx="i" :reseted="reseted" @select="getSelected" @cleared="reseted=false"> </sel-comp> </div> </div> <p>{{ selected }}</p> <button @click="reset">Reset</button> </div>