Vue3: update arrays to input-CodePudding

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..

CodePudding user response：

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/[email protected]/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>