如何在自定义选择组件中使用多个 v-model？

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>

并且由于它是一个选择组件，我希望它可以v-model在multiple未设置属性时使用它，但是当我设置多个传递v-model数组而不是将选定的值附加到数组时，该数组只是被替换为当前选择的选项。也许这与我发出input事件的方式有关。那么如何创建select具有多种支持的自定义组件？

Answer 1

我稍微修改了代码，以使用绑定到 select with 的局部变量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>