カスタム選択コンポーネントで複数のv-modelを使用するにはどうすればよいですか？

Question

iは、以下の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> 

を持っており、それは選択の成分があるので、私はそれがmultiple属性が設定されていないときに動作しv-modelで使えるようにしたいが、私は、複数のパスv-modelアレイの代わりに設定した場合選択した値を配列に追加すると、配列は現在選択されているオプションの値に置き換えられます。多分それは私がinputイベントを出す方法と関係があります。 したがって、複数のサポートを持つカスタムselectコンポーネントを作成するにはどうすればよいですか？

Answer 1

v-modelでselectにバインドされたローカル変数を使用するようにコードを少し修正し、バインドされた値を出力しました。これにより、multipleがtrueのときに選択された値の配列が出力されます。

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>