VueJS Select2 -在初始化时将选项添加到传递的选项
VueJS Select2 -在初始化时将选项添加到传递的选项
提问于 2018-11-17 00:46:32
希望我能解释这一点。
我有一个如VueJS文档中所示的Select2组件。
我使用这个下拉列表为用户提供了一个城市列表。现在已经设置了城市列表，但是如果他们想要的城市不在列表中，用户可以添加其他城市(设置的数据永远不会更新)。
例如，假设你有“城市一”、“城市二”和“城市三”。
用户希望值为"City Four"，因此当标记为真时，他们可以键入"City Four“并选择此值，然后设置该值并进行保存，然后将"City Four”发送到数据库。
下次用户返回此记录时，将从数据库中检索值"City Four“，并应将其显示为下拉列表中的选项。但是，由于发送到Select2的设置城市选项不包含值"City“，因此不会显示。
我有一个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
Stack Overflow用户
发布于 2018-11-20 20:52:27
如果您希望在不更改初始城市列表的情况下显示不同的选项列表，则必须引入一个新列表，该列表将用作其他选择的模型。
为此，您可以使用computed方法，该方法将初始列表与从数据库检索的项目列表组合在一起：
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">请参阅fiddle https://jsfiddle.net/958wrbvd/8/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53342132
复制相关文章
相似问题
腾讯云开发者
