Vuejs2 选择Jquery的Vue 2

尝试将jquery Selected与vue一起使用时，问题是该插件隐藏了我应用的实际选择v-model，因此当我选择一个值时，vue不会将其识别为选择更改事件，并且不会更新模型值

我见过一些适用于Vue 1的解决方案不适用于Vue 2

它显示当前值，但不知道如何设置，以使模型值更改

---

将jQuery插件集成到Vue 2中的首选方法是将它们封装在组件中。下面是一个您选择的插件的示例，该插件封装在一个组件中，该组件可以处理单个和多个选择

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');
    }
  },
  destroyed() {
      $(this.$el).chosen('destroy');
  }
})

Vue.component（“选择”{
道具：{
值：[字符串，数组]，
多重：布尔
},
模板：``，
安装的（）{
$（此。$el）
.val（此.value）
.selected（）
.on（“更改”，e=>this.$emit（'input'，$（this.$el）.val（））
},
观察：{
价值（val）{
$（this.$el）.val（val）.trigger（'selected:updated'）；
}
},
销毁（）{
$（this.$el）.选择（'destroy'）；
}
})

这是一个在模板中使用的示例：

<chosen-select v-model='cities' multiple>
  <option value="Toronto">Toronto</option>
  <option value="Orleans">Orleans</option>
  <option value="Denver">Denver</option>
</chosen-select>

<chosen-select v-model='cities2'>
  <option value="Toronto">Toronto</option>
  <option value="Orleans">Orleans</option>
  <option value="Denver">Denver</option>
</chosen-select>

多伦多
奥尔良
丹佛
多伦多
奥尔良
丹佛

对于多个选择

原始答案

此组件无法正确处理多个选择，但将其保留在此处，因为它是被接受的原始答案

Vue.component("chosen-select",{
  props:["value"],
  template:`<select class="cs-select" :value="value"><slot></slot></select>`,
  mounted(){
    $(this.$el)
      .chosen()
      .on("change", () => this.$emit('input', $(this.$el).val()))
  }
})

Vue.component（“选择”{
道具：[“价值”]，
模板：``，
安装的（）{
$（此。$el）
.selected（）
.on（“更改”，（）=>this.$emit（'input'，$（this.$el.val（）））
}
})

此组件支持v型。这样您就可以在模板中使用它，如下所示：

<chosen-select v-model='cities'>
  <option value="Toronto">Toronto</option>
  <option value="Orleans">Orleans</option>
</chosen-select>

多伦多
奥尔良

---

这是你的小把戏。

将jQuery插件集成到Vue 2中的首选方法是将它们封装在一个组件中。下面是一个您选择的插件的示例，该插件封装在一个组件中，该组件可以处理单个和多个选择

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');
    }
  },
  destroyed() {
      $(this.$el).chosen('destroy');
  }
})

Vue.component（“选择”{
道具：{
值：[字符串，数组]，
多重：布尔
},
模板：``，
安装的（）{
$（此。$el）
.val（此.value）
.selected（）
.on（“更改”，e=>this.$emit（'input'，$（this.$el）.val（））
},
观察：{
价值（val）{
$（this.$el）.val（val）.trigger（'selected:updated'）；
}
},
销毁（）{
$（this.$el）.选择（'destroy'）；
}
})

这是一个在模板中使用的示例：

<chosen-select v-model='cities' multiple>
  <option value="Toronto">Toronto</option>
  <option value="Orleans">Orleans</option>
  <option value="Denver">Denver</option>
</chosen-select>

<chosen-select v-model='cities2'>
  <option value="Toronto">Toronto</option>
  <option value="Orleans">Orleans</option>
  <option value="Denver">Denver</option>
</chosen-select>

多伦多
奥尔良
丹佛
多伦多
奥尔良
丹佛

对于多个选择

原始答案

此组件无法正确处理多个选择，但将其保留在此处，因为它是被接受的原始答案

Vue.component("chosen-select",{
  props:["value"],
  template:`<select class="cs-select" :value="value"><slot></slot></select>`,
  mounted(){
    $(this.$el)
      .chosen()
      .on("change", () => this.$emit('input', $(this.$el).val()))
  }
})

Vue.component（“选择”{
道具：[“价值”]，
模板：``，
安装的（）{
$（此。$el）
.selected（）
.on（“更改”，（）=>this.$emit（'input'，$（this.$el.val（）））
}
})

此组件支持v型。这样您就可以在模板中使用它，如下所示：

<chosen-select v-model='cities'>
  <option value="Toronto">Toronto</option>
  <option value="Orleans">Orleans</option>
</chosen-select>

多伦多
奥尔良

---

这是你的小提琴。

你好，布雷特，谢谢你的回复。我的问题是select数据来自服务器，我无法将select更改为select。@wagas您的意思是选项来自服务器吗？我使用的是Python Django，整个表单来自服务器。因为每次刷新时选项中的数据都会更改。我唯一能做的就是添加像v-model这样的属性etc@Waqas您可以使用

is

告诉Vue将正常的

select

视为所选选择。我想那就行了。谢谢你的帮助。我2天前才开始使用Vue，所以没有太多经验。嗨，Bret，谢谢你的回复。我的问题是select数据来自服务器，我无法将select更改为select。@wagas您的意思是选项来自服务器吗？我使用的是Python Django，整个表单来自服务器。因为每次刷新时选项中的数据都会更改。我唯一能做的就是添加像v-model这样的属性etc@Waqas您可以使用

is

告诉Vue将正常的

select

视为所选选择。我想那就行了。谢谢你的帮助。我2天前才开始使用Vue，所以没有太多经验。