Vue指示が値を更新しない - Jquery Chosen

Question

Vueと共にJquery Chosenを使用しています。

Vue.component("chosen-select", { 
    props: { 
     value: [String, Array], 
     multiple: Boolean 
    }, 
    template: `<select :multiple="multiple"><slot></slot></select>`, 
    mounted() { 
     $(this.$el) 
      .val(this.value) 
      .chosen({ width: '100%' }) 
      .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ディレクティブで

<chosen-select v-model="basicDetailsModel.stateID" v-validate="'required'" data-vv-as="state" :state="errors.has('stateID') ? 'invalid' : 'valid'" name="stateID"> 
         <option :value="null">Please select an option</option> 
         <option v-for="(state, index) in states" :key="index" :value="state.sid">{{state.nm}}</option> 
        </chosen-select> 

状態が静的な値を割り当てられている場合、それは期待どおり正常に動作しますが、私は動的状態値をフェッチする場合は選択があります最新の値で更新されません。それは初期値のままです。

どうすればこの問題を解決できますか？

編集：これは動作します。これは正しい方法だと思いますか？

Vue.component("chosen-select", { 
    data() { 
     return { observer: null } 
    }, 
    props: { 
     value: [String, Array], 
     multiple: Boolean 
    }, 
    template: `<select :multiple="multiple"><slot></slot></select>`, 
    mounted() { 
     // Create the observer (and what to do on changes...) 
     this.observer = new MutationObserver(function (mutations) { 
      $(this.$el).trigger("chosen:updated"); 
     }.bind(this)); 

     // Setup the observer 
     this.observer.observe(
      $(this.$el)[0], 
      { childList: true } 
     ); 
     $(this.$el) 
      .val(this.value) 
      .chosen({ width: '100%' }) 
      .on("change", e => this.$emit('input', $(this.$el).val())) 
    }, 
    watch: { 
     value(val) { 
      $(this.$el).val(val); 
     } 
    }, 
    destroyed() { 
     $(this.$el).chosen('destroy'); 
    } 
}); 

Answer 1

この問題を解決する最も簡単な方法は、v-ifを使用してレンダリングするオプションがあるまで、選択をレンダリングしないことです。

<chosen-select v-if="states && states.length > 0" v-model="basicDetailsModel.stateID" v-validate="'required'" data-vv-as="state" :state="errors.has('stateID') ? 'invalid' : 'valid'" name="stateID"> 

また、コンポーネントが更新されたときにchosen:updatedイベントが発生することもあります。

updated(){ 
    $(this.$el).trigger("chosen:updated") 
}, 

複数の選択肢に対して機能しますが、1つの選択肢では不思議です。

Answer 2

私はあなたが動的状態を取得しているかどうかはわかりませんけど、あなたがそれらを取得するためにjQueryを使用している場合、私はそれがあなたの問題だと思います。 Vue以外のもの（jQueryなど）が何かを変更した場合、Vueは通知を受けません。 そうでない場合でも、thisはjQueryとVueがなぜうまくいかないのかを理解する価値があります。 動的にフェッチする方法を追加できますか？ また、かなり良い選択コントロールを持ち、Vueに完全に入っているVuetifyのようなVueフレームワークの使用を検討してください。