时间戳

首页 > 解决方案 > 更新 select2 组件的选项 - vue js

javascript - 更新 select2 组件的选项 - vue js

问题描述

我目前正在学习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();
    }
  }
})

这是我正在做的一个示例小提琴

标签： javascriptvue.jsjquery-select2vue-component

解决方案

看看我的叉子

https://jsfiddle.net/b5kf2Lyr/

我所做的是，现在我们已经workDaysOptions计算了数据，这些数据将始终返回days不带所选休息日的数据。在select-component我为optionsprop 添加了一个观察器，因此我们可以在更改时重新初始化 select2 实例options。

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

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

推荐阅读