v-select를 복제 및 필터링

v-select를 복제 및 필터링

vuetify v-select를 사용한다.첫 번째 v-선택에서 어레이 옵션을 사용하여 v-선택을 복제하고 다른 v-선택에서 선택한 값을 사용하지 않도록 설정(또는 제거)하십시오.여러 번 복제할 수 있으며 예를 들어 4 v-select 옵션이 X 옵션으로 선택되어 다른 모든 v-select에서도 X 옵션을 사용하지 않도록 설정했으면 한다(첫 번째 v-select에서도 이 X 옵션을 사용하지 않도록 설정).

옵션 배열 예:

[
    { 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' }
]

예

v-선택 기능을 사용하여 값을 여러 선택 상자로 복제하고 나머지 선택 상자에서 이미 선택한 값을 제거하십시오.

여기 작업 코드펜: 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();
  }
})

참조URL: https://stackoverflow.com/questions/58454116/vuetify-clone-and-filter-v-select