I have two inputs to users select a option in array
==> input one: [ orange, green, yellow ] ==> input two: [ orange, green, yellow ]
I need update the second array after user select some option in the first array. Example user select "green" in first input
==> input one: "green" (selected) ==> input two: [orange, yellow] (without option selected in the first array)
I don't know how to do that using Vue3. I am new here..
You can use computed property and filter for remaining items:
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>