更新 select2 组件的选项 - vue js

Posted 2023-05-07

【中文标题】更新 select2 组件的选项 - vue js

【英文标题】：Updating options for select2 component - vue js

【发布时间】：2018-12-31 18:46:22

【问题描述】：

我目前正在学习 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

【参考方案1】：

看看我的叉子

https://jsfiddle.net/b5kf2Lyr/

我所做的是，现在我们有 workDaysOptions 计算数据，将始终返回 days 没有选定的休息日。在select-component 中，我为options 属性添加了一个观察器，这样我们就可以在options 更改时重新初始化select2 实例。

请注意，我将 select2 jQuery 对象分配给 this.$select2，这不是 vue 数据，因此它不是反应式的（我们不需要它）。

这可以进一步完善，但我希望它能回答你的问题。

【讨论】：

好的，我现在明白了，谢谢@Zlatev 的指导，这就是我想要弄清楚的。干杯！