如何在自定义选择组件中使用多个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>