Vuetify克隆并过滤v-select

您可以使用vuetify v-select将值克隆到多个选择框，也可以从其余选择框中删除已选择的值

这是工作中的代码笔：https ://codepen.io/chansv/pen/wvvzbLX ? editors = 1010

您可以通过循环遍历并将索引指定为选择框的键来拥有任意数量的选择框

在下面找到代码

    <div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-btn @click="addSelectBox(true)">add select box</v-btn>
        <div v-for="id in Object.keys(selectItems)" :key="id">
            <v-select
              v-model="selectItems[id].selected"
              :items="selectItems[id].available"
              label="Standard"
              item-key="id"
              item-value="id"
              multiple
              chips
              deletable-chips
              clearable
              @change="modifyOthers"
            ></v-select>
          <v-btn @click="deleteSelectBox(id)">delete select box</btn>
        </div>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    selectItems: {},
    numberOfSelectBoxes: 4,
    itemsBucket: [
      { title: 'title 1', id: '1', status: '0' },
      { title: 'title 2', id: '2', status: '0' },
      { title: 'title 3', id: '3', status: '0' },
      { title: 'title 4', id: '4', status: '0' }
    ],
    allSelected: [],
    allUnSelected: [],
  }),
  methods: {
    modifyOthers(val, id) {
      this.updateAllSelected();
      this.updateAllUnselected();
      this.updateAllAvailable();
    },
    updateAllSelected() {
      this.allSelected = [];
      var self = this;
      Object.keys(self.selectItems).forEach(x => {
        self.allSelected = self.allSelected.concat(self.selectItems[x].selected);
      });
    },
    updateAllUnselected() {
      this.allUnSelected = [];
      var self = this;
      this.allUnSelected = self.itemsBucket.map(x => x.id).filter(x => !self.allSelected.includes(x));
    },
    updateAllAvailable() {
      var self = this;
      Object.keys(self.selectItems).forEach(key => {
        self.selectItems[key].available = self.itemsBucket.map(x => x.id).filter(x => {
          return self.selectItems[key].selected.includes(x) || self.allUnSelected.includes(x);
        });
      });
    },
    addSelectBox(fromUI) {
      var self = this;
      if (fromUI) {
        var currentLast = +Object.keys(self.selectItems)[Object.keys(self.selectItems).length -1];
        var newIndex = currentLast + 1;
        self.$set(self.selectItems, newIndex, {selected: '', available: []});
        self.selectItems[newIndex].available = self.allUnSelected;
      } else {
        for (var i = 1; i <= this.numberOfSelectBoxes; i++) {
          self.$set(self.selectItems, i, {selected: '', available: []});
          self.selectItems[i].available = self.itemsBucket.map(y => y.id);
        }
      }
    },
    deleteSelectBox(id) {
      delete this.selectItems[id];
      this.modifyOthers();
    }
  },
  created() {
    this.addSelectBox(false);
    this.updateAllUnselected();
  }
})