VueJS选择指令不更新更改选项

Question

我想通过AJAX使用VueJS填充我的jQuery选择下拉字段，但是当我应用新值时它不会更新选择下拉列表。

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

下面一个例子，其中它不工作，我加入城市阿姆斯特丹一旦万事俱备但只有在没有-JS下拉列表显示出来：http://jsfiddle.net/qfy6s9Lj/106/

任何人有一个简单的办法？我觉得使用setTimeout()是不是要走的路。

Answer 1

这是一个解决方案，但它需要一些工作。首先，如果您更新为使用Vue的1.0版本，则可以访问参数值，这样您可以在向您添加项目时设置一个观察器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中的一个组件。