Vue Selectri c Множественный выбор оболочки - PullRequest
Новая
       106

Vue Selectri c Множественный выбор оболочки

0 голосов
/ 13 июля 2020

Я пытаюсь создать компонент-оболочку Vue вокруг Selectri c, но мне сложно заставить его работать с множественным выбором. Он работает как одиночный выбор, когда я опускаю атрибут multiple , и почти работает, когда я его добавляю. Однако при выборе нескольких опций я выбираю только первый вариант для моей v-модели, filterRepairs.roSta .

Это то, что у меня есть до сих пор (в основном заимствовано из vue -selectri c) 

<template>
    <select :name="name" :id="id">
        <option
            v-for="option in options"
            :key="option.value"
            :value="option.value"
        >{{ option.label }}</option>
    </select>
</template>

<script>
import $ from 'jquery';
require('selectric');

export default {
    props: {
        name: {
            type: String,
            required: true,
        },
            id: {
            type: String,
        },
            options: {
            type: Array,
            required: true,
        },
  },

    data() {
        return {
            value: '',
        }
    },

    mounted() {
        $(this.$el).selectric();
        $(this.$el).on('selectric-change', (event, element, selectric) => {
            this.dispatchInputEvent(element.value);
        });
    },

    destroyed: function () {
        $(this.$el).off().selectric('destroy')
    },

    methods : {
        dispatchInputEvent(value) {
            this.$emit('input', value, this);
            this.$emit('blur', value, this);
        },

        refresh() {
            $(this.$el).selectric('refresh');
        },
    },
}

</script>

А вот как я его сейчас использую: 

<selectric
  v-model="filterRepairs.roSta"
  :options="[{'value': 'one', 'label': 'one'}, {'value': 'two', 'label': 'two'}]"
  class="select-blue"
  name="repair-order-status"
  multiple
/>
...