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>

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

Answer 1

我稍微修改了代码，使用绑定到select v-model的局部变量并发出绑定值。当multiple为真时，这会导致发出所选值的数组。

＆＃13;

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
  }
})

＆＃13;

<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>

＆＃13;

如何在自定义选择组件中使用带有多个的v模型？

1 个答案: