Tengo dos entradas para que los usuarios seleccionen una opción en la matriz
==> entrada uno: [ naranja, verde, amarillo ] ==> entrada dos: [ naranja, verde, amarillo ]
Necesito actualizar la segunda matriz después de que el usuario seleccione alguna opción en la primera matriz. Ejemplo de usuario selecciona "verde" en la primera entrada
==> entrada uno: "verde" (seleccionado) ==> entrada dos: [naranja, amarillo] (sin opción seleccionada en la primera matriz)
No sé cómo hacer eso usando Vue3. Soy nuevo aquí..
Puede usar la propiedad calculada y filtrar para los elementos restantes:
const { ref, computed } = Vue const app = Vue.createApp({ // COMPOSITION API setup() { const items = ref([ 'orange', 'green', 'yellow' ]) const selected = ref(null) const selected2 = ref(null) const remainItems = computed(() => items.value.filter(i => !i.includes(selected.value))) return { items, selected, selected2, remainItems } } // OPTIONS API /*data() { return { items: [ 'orange', 'green', 'yellow' ], selected: null, selected2: null }; }, computed: { remainItems() { return this.items.filter(i => !i.includes(this.selected)) } }*/ }) app.mount('#demo') <script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script> <div id="demo"> <div>Selected: {{ selected }}</div> <select v-model="selected"> <option disabled value="">Please select one</option> <option v-for="item in items">{{item}}</option> </select> <div>Selected: {{ selected2 }}</div> <select v-model="selected2"> <option disabled value="">Please select one</option> <option v-for="item in remainItems">{{item}}</option> </select> </div>