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中的一個組件。