自定義多選和單選問題-有解無憂

我創建了一個組件，除了系結字串而不是陣列之外，它可以完美運行。事件正確觸發。

因此，在多選版本中，如果我選擇和取消選擇專案，則multiSelected變數會正確更新。但是，當在單個選擇中選擇另一個值時，singleSelected變數不會被更改，但是會觸發相同的事件。

在此處簡化代碼，以便您可以看到邏輯和問題：

Vue.component('dropdown', {
  template: `<div >
    <label v-for="item in items" :key="item.value" :>
      {{ item.label }}
      <input type="checkbox" :value="item.value" :checked="selected.indexOf(item.value) > -1" @change="selected = $event" />
    </label>
  </div>`,
  props: [ 'value', 'items', 'multiSelect' ],
  computed: {
    selected: {
      get: function() {
        if (this.value === undefined) {
          return [];
        }
        if (!Array.isArray(this.value)) {
          return [ this.value ];
        }
        return this.value;
      },
      set: function($event) {
        let current = this.selected;

        if (!this.multiSelect) {
          current = $event.target.value;
        }

        if (this.multiSelect && !$event.target.checked) {
          const index = current.indexOf($event.target.value);
          if (index > -1) {
            current.splice(index, 1)
          }
        }
        if (this.multiSelect && $event.target.checked) {
          current.push($event.target.value);
        }

        console.log(current);
        this.$emit('value', current);
      }
    }
  }
});

Vue.component('wrapper', {
  template: `
    <div>
      Single
      <dropdown :items="items" v-model="singleSelected" :multi-select="false" name="single" />
      <br />
      Multi
      <dropdown :items="items" v-model="multiSelected" :multi-select="true" name="multi" />
      <p>Models</p>
      <p>singleSelected: {{ singleSelected }}</p>
      <p>multiSelected: {{ multiSelected }}</p>
    </div>
  `,
  data() {
    return {
      items: [{value:'bmw',label:'BMW',count:1},{value:'audi',label:'Audi',count:1},{value:'kia',label:'KIA',count:1}],
      multiSelected: ['kia'],
      singleSelected: 'kia',
    }
  }
});

new Vue().$mount('#app');

.dropdown {
  border: 1px solid black;
  padding: 10px;
  display: block;
}
label {
  margin: 5px;
}


.selected {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <wrapper>
    
  </wrapper>
</div>

uj5u.com熱心網友回復：

v-modelon custom component期望該組件將發出input事件，而不是value

您的組件（某種程度上）在多選模式下作業的唯一原因是因為您直接改變了由value道具傳遞給您的輸入陣列（換句話說，發出的事件是無用的）。不要那樣做。在發射之前創建一個新陣列

此外，單選模式還有一個問題 - 僅取消選中復選框后，您仍會發出值，因此即使未選中任何復選框，模型也會設定為一個值

我個人覺得你的設計很奇怪，有幾個原因：

使用不同的v-model“型別”（陣列或字串）感覺不自然
在單選模式下，它表現為收音機，所以為什么不使用收音機
如果multiSelect在運行時切換prop會發生什么？

Vue.component('dropdown', {
  template: `<div >
    <label v-for="item in items" :key="item.value" :>
      {{ item.label }}
      <input type="checkbox" :value="item.value" :checked="selected.indexOf(item.value) > -1" @change="selected = $event" />
    </label>
  </div>`,
  props: [ 'value', 'items', 'multiSelect' ],
  computed: {
    selected: {
      get: function() {
        if (this.value === undefined) {
          return [];
        }
        if (!Array.isArray(this.value)) {
          return [ this.value ];
        }
        return this.value;
      },
      set: function($event) {
        if(this.multiSelect) {
          if (!$event.target.checked) {
            this.$emit('input', this.selected.filter(v => v !== $event.target.value))
          } else {
            this.$emit('input', [...this.selected, $event.target.value])
          }
        } else {
          this.$emit('input', $event.target.checked ? $event.target.value : "")
        }
      }
    }
  }
});

Vue.component('wrapper', {
  template: `
    <div>
      Single
      <dropdown :items="items" v-model="singleSelected" :multi-select="false" name="single" />
      <br />
      Multi
      <dropdown :items="items" v-model="multiSelected" :multi-select="true" name="multi" />
      <p>Models</p>
      <p>singleSelected: {{ singleSelected }}</p>
      <p>multiSelected: {{ multiSelected }}</p>
    </div>
  `,
  data() {
    return {
      items: [{value:'bmw',label:'BMW',count:1},{value:'audi',label:'Audi',count:1},{value:'kia',label:'KIA',count:1}],
      multiSelected: ['kia'],
      singleSelected: 'kia',
    }
  }
});

new Vue().$mount('#app');

.dropdown {
  border: 1px solid black;
  padding: 10px;
  display: block;
}
label {
  margin: 5px;
}


.selected {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <wrapper>
    
  </wrapper>
</div>

uj5u.com熱心網友回復：

您可以等待事件和觸發方法：

Vue.component('dropdown', {
  template: `<div >
    <label v-for="item in items" :key="item.value" :>
      {{ item.label }}
      <input type="checkbox" :value="item.value" :checked="selected.indexOf(item.value) > -1" @change="selected = $event" />
    </label>
  </div>`,
  props: [ 'value', 'items', 'multiSelect' ],
  computed: {
    selected: {
      get: function() {
        if (this.value === undefined) {
          return [];
        }
        if (!Array.isArray(this.value)) {
          return [ this.value ];
        }
        return this.value;
      },
      set: function($event) {
        let current = this.selected;

        if (!this.multiSelect) {
          current = $event.target.value;
        }

        if (this.multiSelect && !$event.target.checked) {
          const index = current.indexOf($event.target.value);
          if (index > -1) {
            current.splice(index, 1)
          }
        }
        if (this.multiSelect && $event.target.checked) {
          current.push($event.target.value);
        }

        console.log(current);
        this.$emit('value', current);
      }
    }
  }
});

Vue.component('wrapper', {
  template: `
    <div>
      Single
      <dropdown :items="items" v-model="singleSelected" :multi-select="false" name="single" @value="updateSingle" />
      <br />
      Multi
      <dropdown :items="items" v-model="multiSelected" :multi-select="true" name="multi"  />
      <p>Models</p>
      <p>singleSelected: {{ singleSelected }}</p>
      <p>multiSelected: {{ multiSelected }}</p>
    </div>
  `,
  data() {
    return {
      items: [{value:'bmw',label:'BMW',count:1},{value:'audi',label:'Audi',count:1},{value:'kia',label:'KIA',count:1}],
      multiSelected: ['kia'],
      singleSelected: 'kia',
    }
  },
  methods: {
    updateSingle(val) {
      this.singleSelected = val
    }
  }
});

new Vue().$mount('#app');

.dropdown {
  border: 1px solid black;
  padding: 10px;
  display: block;
}
label {
  margin: 5px;
}


.selected {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <wrapper>
    
  </wrapper>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/406893.html

標籤：

上一篇：格式化嵌套資料JS

下一篇：使用Vue3CompositionAPI在花括號中顯示加載的資料