Vue3：更新数组以输入

Question

我有两个用户输入 select 数组中的一个选项

==> 输入一个：[橙色，绿色，黄色] ==>输入两个：[橙色，绿色，黄色]

我需要在用户 select 第一个数组中的某个选项后更新第二个数组。示例用户 select 第一个输入中的“绿色”

==> 输入一个：“绿色”（selected） ==> 输入两个：[orange, yellow]（第一个数组中没有选项 selected）

我不知道如何使用 Vue3 来做到这一点。我是新来的..

Answer 1

您可以使用计算属性并筛选剩余项目：

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>

Vue3：更新数组以输入

Vue3: update arrays to input

javascript

arrays

input

vue.js

vuejs3