我目前正在学习vue js。我创建了一个选择组件,目前用于选择员工的“休息日”和“工作日”。基本上,我想要的是在第二个选择输入(工作日)的选项中删除选定的休息日。
我已设法加载默认值,但如果第一个输入已更改,我找不到更新第二个选择输入选项的方法。
Vue.component('select-component',{
props: ['options'],
mounted() {
var self = this;
$(this.$el).select2({
data: this.options
})
.on('change', function(e){
self.$emit('input', $(e.target).val())
});
},
template: '<select></select>'
})
new Vue({
el: '#app',
data: {
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Saturday'],
workDays: [],
selectedRestDay: 'Sunday',
selectedWorkDays: []
},
created() {
this.getWorkDaysOptions();
},
methods: {
getWorkDaysOptions: function() {
var arr = Object.assign(this.workDays, this.days);
this.workDays = _.pull(arr, this.selectedRestDay)
}
},
watch: {
selectedRestDay: function() {
this.getWorkDaysOptions();
}
}
})
这是一个例子 fiddle我正在做的事情
最佳答案
看看我的 fork
https://jsfiddle.net/b5kf2Lyr/
我所做的是,现在我们有 workDaysOptions
计算数据,它将始终返回 days
w/o 选定的休息日。在 select-component
中,我为 options
prop 添加了一个观察者,这样我们就可以在 options
更改时重新初始化 select2 实例。
请注意,我将 select2 jQuery 对象分配给 this.$select2
,它不是 vue 数据,因此它不是 react 性的(我们不需要它)。
这可以进一步完善,但我希望它能回答您的问题。
关于javascript - 更新 select2 组件的选项 - vue js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51493642/