vue.js select2 多选

Question

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

我需要选择多个值。当我选择多个值时，我的代码会挂起，但是当我使用单个选择时，它可以很好地与self.$emit('input', this.value) 配合使用。我需要的是选择多个值。

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

看起来您使用了 Vue 文档示例的 select2 包装器作为您的基础。我已经修改了包装器来处理多选 here。

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

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

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

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

哪个触发变化，哪个触发watch等等

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

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。您可能希望有一个组件处理多个选定值，而另一个组件处理单个值。

Answer 2

正如我在这里回答的： Using Select2 (multiple selections) with vue.js

改变这个：

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

到这里：

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