vue.select 2 다중 선택

vue.select 2 다중 선택

며칠 동안 나는 이 오류에 대한 답을 찾기 위해 찾아다녔다.여러 가지 대안을 시도해 봤지만 소용이 없었다.

값을 여러 개 선택해야 합니다.값을 여러 개 선택하면 코드가 정지되지만 단일 선택을 사용할 경우 이 코드와self.$emit('input', this.value)제가 필요한 것은 여러 개의 값을 선택하는 것입니다.

2를 선택합니다.표시하다

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

select2에 대한 래퍼의 Vue 설명서 예를 기준으로 사용한 것 같습니다.여기서 여러 선택을 처리하도록 래퍼를 수정했습니다.

이 작업을 수행할 경우 다음과 같은 문제가 발생할 것으로 예상됩니다.

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

무한 루프 상태가 됩니다.새로운 어레이를 방출하면 워치가 트리거되기 때문입니다.

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

변경, 워치 등을 트리거합니다.

이를 수정하려면 워치에 전달된 값이 선택 항목 값과 동일한지 확인하고, 동일한 경우 무시하십시오.이렇게 했어요. 방법은 이렇습니다.

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. 선택한 여러 값을 처리하는 컴포넌트와 단일 값을 처리하는 컴포넌트를 각각 가질 수 있습니다.

여기에 답변한 바와 같이 Select 2(복수 선택)를 vue.js와 함께 사용

변경:

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

이를 위해:

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

언급URL : https://stackoverflow.com/questions/43941840/vue-js-select2-multiple-select