Question

希望我能解释一下。

我有一个VueJS文档中所示的Select2组件。

我正在使用此下拉菜单为用户提供例如城市的列表。现在已经设置了城市列表，但如果列表中没有他们想要的城市，则用户可以添加其他城市（设置的数据永远不会更新）。

例如，假设您有“第一城市”，“第二城市”和“第三城市”。

用户希望使用值“ City Four”，因此标签为真时，他们可以输入“ City Four”并选择此值，设置该值并保存，然后将“ City Four”发送到数据库。

下次用户返回到该记录时，将从数据库中检索值“城市四号”，并应在下拉菜单中将其显示为选项。但是，由于发送到Select2的设置城市选项不包含值“ City Four”，因此不会显示。

我有一个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' }
        ]
    }
})

请问有人知道我可以如何解决此问题，以便即使该值不在列表中也可以显示该值，但是如果用户需要更改它，则仍可以从列表中选择一个值。

希望这很有意义，在此先感谢

Answer 1

如果要显示其他选项列表而不更改初始城市列表，则必须引入一个新列表，该列表将用作其他选择的模型。

为此，您可以使用一种计算方法，该方法会将初始列表与从数据库中检索到的项目列表结合在一起：

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
        ];
    }
}

然后使用新的城市选项作为select的模型：

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

请参见小提琴https://jsfiddle.net/958wrbvd/8/

VueJS Select2-在初始化时将选项添加到传递的选项

1 个答案: