autocomplete with static-data updates model with label (text) not value (id)

  • I use autocomplete with static-data, the data object looks like this:

    var customers = [
    	  { value:1, label: "Org one" }
    	, { value:2, label: "Org two" }

    In order for the autocomplete to filter on label I set the “field” attribute to “label” like this:

    <q-input v-model="idOrg">

    When selected the model (idOrg) gets updated with the label (text) not the value (id).
    I know I can create multiple “selected” methods or pass on arguments to it to change this (wrong) update to ID.
    Can I avoid this? How can I configure the autocomplete to filter by “label” but update with “value”?


  • Sorry I missed that the code above was your boot file. I’m no expert on Vuex, but that isn’t how the plug-ins can be added after the store has already been constructed.

    Have a look at this.

    Not sure it will work with that plug-in (as the answer also notes), but it might be worth a try.


  • Thanks for your reply molinari.
    I don’t use Vuex, its a simple, out of the box Vue app with Quasar.
    Please see the following codepen:
    Goal: search by label (name), select the value (id)

  • Oops. I posted in the wrong thread. 😃 Sorry about that.

    Not sure this is what you are looking for,

    But, it gives you the value.


Log in to reply