vue.js select2 倍 select

Question

很多天来，我一直在寻找这个错误的答案。我尝试了很多替代方案，但没有任何效果。

我需要 select 多个值。当我 select 多个值时，我的代码挂起，但当我使用单个 select 时，它与 self.$emit('input', this.value) 一起工作得很好。我需要的是select多个值。

Select2.vue

<template>
    <select multiple class="input-sm" :name="name">
        <slot></slot>
    </select>
</template>
<style src="select2/dist/css/select2.min.css"></style>
<style src="select2-bootstrap-theme/dist/select2-bootstrap.min.css"></style>

<script>
    import Select2 from 'select2';

    export default{
        twoWay: true,
        priority: 1000,
        props: ['options', 'value', 'name'],
        data(){
            return{
                msg: 'hello'
            }
        },
        mounted(){
            var self = this;
            $(this.$el)
                .select2({theme: "bootstrap", data: this.options})
                .val(this.value)
                .trigger('change')
                .on('change', function () {
                    //self.$emit('input', this.value) //single select worked good
                    self.$emit('input',  $(this).val()) // multiple select
                })
        },
        watch: {
            value: function (value) {
                $(this.$el).val(value).trigger('change');
            },
            options: function (options) {
                $(this.$el).select2({ data: options })
            }
        },
        destroyed: function () {
            $(this.$el).off().select2('destroy')
        }
    }
</script>

new.vue

    <p>Selected: {{ model.users_id }}</p>
              <select2 :options="options" v-model="model.users_id" name="options[]" style="width: 1000px; height: 1em;" class="form-control">
           <option value="0">default</option>
            </select2>

    export default {
            data(){
                return {
                    model: {
                        'users_id': [],
                    },
                    options: [],

components:{
            'select2': Select2
         },

Answer 1

您似乎使用了 select2 包装器的 Vue 文档示例作为基础。我修改了包装器以处理多个 select here.

我预计您运行遇到的主要问题是，如果您这样做：

self.$emit('input',  $(this).val()) // multiple select

你将陷入无限循环，因为你正在发射一个新数组，它将触发手表，

value: function (value) {
    $(this.$el).val(value).trigger('change');
},

哪个触发变化，哪个触发手表等

要解决这个问题，只需检查传入手表的值是否与 select 的值相同，如果是，则忽略它。这是我的做法。

value: function (value) {
  // check to see if the arrays contain the same values
  if ([...value].sort().join(",") !== [...$(this.$el).val()].sort().join(","))
    $(this.$el).val(value).trigger('change');
},

另请注意，我将它变成了它自己的组件，select2Multiple。您可能想要一个组件处理多个 selected 值，另一个组件处理单个值。

Answer 2

正如我在这里回答的那样：

改变这个：

.on('change', function () {
  self.$emit('input', this.value); // Don't use this.value
});

为此：

.on('change', function () {
  self.$emit('input', $(this).val());
});

vue.js select2 倍 select

vue.js select2 multiple select

vue.js

vue-component

vuejs2