[SOLVED] Vue js How to use onChange with TomSelect

Vue js How to use onChange with TomSelect

Is there a way to use onChange with TomSelect ?

<TomSelect
            :disabled="disableForm"
              v-model="wareHouse.agent.id"
              :onChange="changeAgentData"
              class="w-full"
            >
              <option value="">No Agent</option>
              <template v-for="(business, indexKey) in company.agentCompanies">
                <option v-if="business.companyType.includes('Shipper')" :key="indexKey" :value="business.id">{{business.name}}</option>
              </template>
              
            </TomSelect>

This does nothing. changeAgentData doesn't fire. i tried @change , change, changed

Solution

Not sur about what is tomSelect, a custom component you have created or from a librairy.

But in every case, if you want @change work, you have to setup this event or the librairy need to have a trigger setup on this (see the documentation for this component you use in that case).

You can avoid this problem if you don't really understand, and use a watcher instead. Your v-model use wareHouse.agent.id, so i think you want to do something if this property change.

watch: {
 'wareHouse.agent.id'(newId) {
   this.changeAgentData(newId)
 }
}

Every time a user select a new option, your v-model update the value and the watcher is called. https://vuejs.org/guide/essentials/watchers.html#basic-example