在 Vue 3 中的多个 select 组件中选择互斥选项

Question

vue 组件的 options 变量有 5 个唯一值。我希望用户为我提供的每个 select 选项只选择 1 个值。即我有 5 个输入 select 组件，我希望用户 select 每个组件中只有 1 个值不能被其他 select 组件使用.

例如

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 ]

如果用户 select 在输入 1 中输入了橙色，则用户无法在输入 2 到 5 中再次 select 橙色。

我尝试通过维护 itemSelected[] 和 itemsAvailable[] 创建 2 个数组，但是我无法解决问题。

如何解决 Vue 3 中的这个问题？

Answer 1

您可以创建组件供选择，并将所需的值作为参数传递：

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>

在 Vue 3 中的多个 select 组件中选择互斥选项

Selecting mutually exclusive options among multiple select components in Vue 3

javascript

arrays

vue.js

vuejs3

vue-composition-api