2016-08-02 18 views
1

VueJSを使用してjQuery ChosenドロップダウンフィールドにAJAXを入力しようとしていますが、新しい値を適用するとChosenドロップダウンが更新されません。変更オプションでVueJS Chosenディレクティブが更新されない

私は、このような手動で、我々はAJAXの応答を取得するときしかし、私はVueJSは、すべてのドロップダウンに結果を解析するために数秒を必要とするので、これは動作しません(私は約20で同じ値を持つがあると思う $('.cs-select').trigger("chosen:updated");をトリガとして複数のものを試してみました

1ページ)。すべての準備が整ったら、私は街アムステルダムを追加していここ

それが動作しない例は、しかしのみなし-JS]ドロップダウンに表示さ:http://jsfiddle.net/qfy6s9Lj/106/

誰でも簡単に修正を得ましたか。私はsetTimeout()を使用するように感じるは行く方法ではありません。

+0

idは単にコンポーネントにして、更新したいデータのウォッチを使ってjqueryアップデートをトリガすることをお勧めします。コンポーネントはディレクティブよりもはるかに強力で、selectをコンポーネントのルート要素として配置することができます。 – vbranden

答えて

0

これは1つの解決策ですが、少し作業が必要です。最初に1.0バージョンのVueを使用して更新する場合は、cities配列リファレンス(https://vuejs.org/guide/custom-directive.html#params)にアイテムを追加するときにウォッチャーを設定できるparams値にアクセスできます。しかし、1.0では、オプションの要素を手動で書き出す必要があるので、v-forを使用する必要があります。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のコンポーネントです。

関連する問題