[Vuejs]-Vue Directive not updating it's value – Jquery Chosen

by

1👍

✅

The easiest way to fix this issue is simply not to render the select until you have options to render using 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">

You could also play around with emitting the chosen:updated event when the component is updated.

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

which works for multiple selects, but mysteriously not for single selects.

-1👍

I am not sure how you are fetching the states dynamically, but if you’re using jQuery to get them, then I think that is your problem. Vue doesn’t get notified if non-Vue things (like jQuery) change anything.
Even if that’s not the case, this is worth reading to see why jQuery and Vue don’t get along.
Can you add how you are fetching them dynamically?
Also, consider using a Vue framework like Vuetify which has a pretty good select control and is totally in Vue.

Leave a comment