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">
    <q-autocomplete
          :static-data="{field:'label',list:customers}"
         :min-characters="0"
        @selected="selected"
      />
    </q-input>
    

    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”?

    thanks
    jr



  • 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. https://stackoverflow.com/questions/50959594/dynamically-register-a-vuex-plugin

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

    Scott



  • 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: https://codepen.io/jriemer/pen/BEpXNe
    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, https://codepen.io/smolinari/pen/WWpdVG.

    But, it gives you the value.

    Scott


Log in to reply