如何在自定義選擇組件中使用多個v模型？

Question

我有以下VUE部件

<template> 
    <div id="input-div"> 
    <label v-if="label">{{ label }}</label> 
    <select :multiple="multiple" :value="value" @change="change($event.target.value)"> 
     <slot></slot> 
    </select> 
    <div class="error"><slot name="error"></slot></div> 
    </div> 
</template> 

<script> 
    export default { 
     name: 'ha-select', 
     props: ['label', 'value', 'multiple'], 
     methods: { 
      change(value) { 
       this.$emit('input', value); 
      } 
     } 
    } 
</script> 

並且由於其是一個選擇組分i希望它是可用與v-model當未設置multiple屬性，它的工作原理，但是當我設置多個通v-model數組代替將選定的值附加到數組中，該數組將被當前選定選項的值替換。也許這與我發出input賽事的方式有關。 那麼如何創建一個具有多個支持的自定義select組件？

Answer 1

我已經稍微修改了代碼，使用局部變量綁定到與v-model選擇併發出綁定值。這導致在multiple爲真時發出所選值的數組。

console.clear() 
 

 
const CustomSelect = { 
 
    template: ` 
 
    <div id="input-div"> 
 
    <label v-if="label">{{ label }}</label> 
 
    <select :multiple="multiple" v-model="selected" @change="$emit('input', selected)"> 
 
     <slot></slot> 
 
    </select> 
 
    <div class="error"><slot name="error"></slot></div> 
 
    </div> 
 
    `, 
 
    name: 'ha-select', 
 
    props: ['label', 'value', 'multiple'], 
 
    data(){ 
 
    return { 
 
     selected:this.value 
 
    } 
 
    }, 
 
} 
 
new Vue({ 
 
    el:"#app", 
 
    data:{ 
 
    albums: [] 
 
    }, 
 
    components: { 
 
    CustomSelect 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> 
 
<div id="app"> 
 
    <custom-select label="Pink Floyd Albums" v-model="albums" :multiple="true"> 
 
    <option value="1">Dark Side of the Moon</option> 
 
    <option value="2">Animals</option> 
 
    <option value="3">The Wall</option> 
 
    </custom-select> 
 
    <div> 
 
    Selected Albums {{albums}} 
 
    </div> 
 
</div>