更改 Vue 组件中的 SELECT 选项答案

【问题标题】：Changing SELECT options in Vue component更改 Vue 组件中的 SELECT 选项
【发布时间】：2022-01-11 11:10:29
【问题描述】：

我正在使用 Vue 2 组件来实现 jQuery Chosen SELECT 字段。它工作正常，除了我需要能够动态更改选项列表并且它没有按预期工作。

这个fiddle 显示了问题。当您单击按钮更改选项时，不会立即发生任何更改 - 但是，当您继续选择一个选项时，就会发生更改。

我需要做什么才能在单击按钮时立即更改选项列表？

这里是JS代码：

Vue.component("chosen-select",{
    props:{
    value: [String, Array],
    multiple: Boolean
  },
  template:`<select :multiple="multiple"><slot></slot></select>`,
  mounted(){
        $(this.$el)
        .val(this.value)
        .chosen()
      .on("change", e => this.$emit('input', $(this.$el).val()))
    },
  watch:{
    value(val){
       $(this.$el).val(val).trigger('chosen:updated');
    }
  }
})

var vm = new Vue({
  data: {
    selectedCities: [],
    cities: ["Toronto", "Orleans", "Denver"]
  },
  methods:{
    changeOptions() {
      console.log("changing options");
      this.cities = ["London", "Newcastle", "Liverpool"];
    }
  }
}).$mount("#search-results");

【问题讨论】：

标签： jquery vuejs2 vue-component

【解决方案1】：

我最终使用了here 中描述的密钥更改技巧。

在小提琴中不能很好地工作，它会创建重复的组件 - 但它确实在我的实际应用程序中工作，可能是因为我在 .vue 文件中使用了单独的组件定义。

【讨论】：