VueJS Chosen 指令不会更新更改选项答案

【问题标题】：VueJS Chosen directive does not update on change optionsVueJS Chosen 指令不会更新更改选项
【发布时间】：2016-08-02 09:15:45
【问题描述】：

我正在尝试使用 VueJS 通过 AJAX 填充我的 jQuery Chosen 下拉字段，但是当我应用新值时，它不会更新 Chosen 下拉列表。

我尝试了多种方法，例如当我们收到 AJAX 响应时手动触发 $('.cs-select').trigger("chosen:updated"); 但是我认为这不起作用，因为 VueJS 需要几秒钟来将结果解析到所有下拉列表（我有大约 20 个具有相同值在一页上）。

这是一个不起作用的示例，一旦一切就绪，我将添加城市阿姆斯特丹，但仅显示在非 JS 下拉列表中：http://jsfiddle.net/qfy6s9Lj/106/

有人有简单的解决方法吗？我觉得使用setTimeout() 不是可行的方法。

【问题讨论】：

id 建议将其作为一个组件并使用监视您要更新的数据来触发您的 jquery 更新。组件比指令强大得多，您可以将 select 作为组件的根元素。

标签： javascript ajax vue.js jquery-chosen

【解决方案1】：

这是一种解决方案，但需要做一些工作。首先，如果您更新为使用 Vue 的 1.0 版本，您可以访问一个 params 值，当您向 cities 数组引用 (https://vuejs.org/guide/custom-directive.html#params) 添加项目时，该值将允许您设置一个观察者。但是，您需要使用 v-for 列出选项，因为在 1.0 中您需要手动写出选项元素 https://vuejs.org/guide/forms.html#Select

我相信它不起作用的原因。是因为当您的自定义指令中的选项发生更改时，没有任何内容可以监听该更改。 update 函数只监听提供给v-chosen 的变量的变化。

根据您的需求和时间范围，您可能希望一直升级到 2.0。它仍处于测试阶段，但即将正式发布。在 2.0 中，您将创建一个自定义组件来处理插件，例如 (https://github.com/vuejs/vue/blob/next/examples/select2/index.html)，这是 1.0 中的指令，现在是 2.0 中的组件。

【讨论】：