VueJS Select2 - добавление опции к пропущенной опции при инициализации - PullRequest
Новая
       12

VueJS Select2 - добавление опции к пропущенной опции при инициализации

0 голосов
/ 16 ноября 2018

Надеюсь, я смогу это объяснить.

У меня есть компонент Select2, как показано в документации VueJS.

Я использую этот раскрывающийся список, чтобы предоставить пользователю список, например, городов. Теперь список городов задан, но пользователи могут добавлять другие города, если нужного им нет в списке (установленные данные никогда не обновляются).

Например, скажем, у вас есть "Город Один", "Город Два" и "Город Три".

Пользователь хочет иметь значение "City Four", так как теги имеют значение true, они могут ввести "City Four" и выбрать это значение, оно установлено, и сохранение выполнено, и "City Four" теперь отправляется на база данных.

В следующий раз, когда пользователь вернется к этой записи, значение «Город четыре» будет извлечено из базы данных и должно быть отображено как опция в раскрывающемся списке. Однако, поскольку параметры набора городов, отправляемые в Select2, не содержат значения «Город четыре», оно не отображается.

У меня есть JSFiddle, где я надеюсь, что это продемонстрировано: https://jsfiddle.net/Morney/958wrbvd/1/

Vue.component('select2', {
    props: ['options', 'value'],
    template: '#select2-template',
    mounted: function () {
        var vm = this
        $(this.$el)
            .val(this.value)
            // init select2
            .select2({ data: this.options, tags: true, allowClear: true })
            .val(this.value)
            .trigger('change')
            // emit event on change.
            .on('change', function () {
                vm.$emit('input', this.value)
            })
    },
    watch: {
        value: function (value) {
            // update value
            $(this.$el).val(value).trigger('change');
        },
        options: function (options) {
            // update options
            $(this.$el).empty().select2({ data: options })
        }
    },
    destroyed: function () {
        $(this.$el).off().select2('destroy')
    }
})

var vm = new Vue({
    el: '#app',
    template: '#demo-template',
    data: {
        selectedCity: 'City One',
        selectedCityTwo: 'City Four',
        cityOptions: [
            { id: 'City One', text: 'City One' },
            { id: 'City Two', text: 'City Two' },
            { id: 'City Three', text: 'City Three' }
        ]
    }
})

Кто-нибудь знает, как я могу обойти это, пожалуйста, чтобы значение могло отображаться, даже если его нет в списке, но пользователь все равно мог выбрать значение из списка, если ему нужно было его изменить.

Надеюсь, что это имеет смысл, заранее спасибо.

1 Ответ

0 голосов
/ 20 ноября 2018

Если вы хотите отобразить другой список опций без изменения исходного списка городов, то вы должны ввести новый список, который будет служить моделью для другого выбора.

Для этого вы можете использовать вычисленный метод, который объединит начальный список со списком элементов, извлеченных из базы данных: 

data: {
    cityOptions: [
      { id: 'City One', text: 'City One' },
      { id: 'City Two', text: 'City Two' },
      { id: 'City Three', text: 'City Three' }
    ],
    additionalCityOptions: [
        { id: 'City Four', text: 'City Four' }
    ]
}, 
computed: {
    cityOptionsDisplayed() {
        return [
        ...this.cityOptions, 
        ...this.additionalCityOptions
        ];
    }
}

Затем используйте новые параметры города в качестве модели.для выбора: 

<select2 :options="cityOptionsDisplayed" v-model="selectedCityTwo">

См. скрипку https://jsfiddle.net/958wrbvd/8/

...