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

我稍微修改了代码，使用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>