Vue中TomSelect组件onChange事件无法触发，求有效实现方案

针对你遇到的TomSelect组件change事件不触发的问题，可尝试以下几种解决方式：

1. 使用Vue原生事件绑定（带.native修饰符） #

若使用的是封装后的Vue版TomSelect组件，部分场景下需要通过.native修饰符监听原生change事件：

<TomSelect
  :disabled="disableForm"
  v-model="wareHouse.agent.id"
  @change.native="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>

2. 通过settings属性传入回调配置 #

多数TomSelect的Vue封装版本支持通过settings属性传入原生配置项，直接指定onChange回调：

<TomSelect
  :disabled="disableForm"
  v-model="wareHouse.agent.id"
  :settings="{ 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>

3. 监听组件的input或update事件 #

部分封装组件会将值变化映射为input或update:modelValue事件，可尝试监听这些事件：

<TomSelect
  :disabled="disableForm"
  v-model="wareHouse.agent.id"
  @input="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>

4. 手动初始化并绑定事件（原生TomSelect场景） #

如果是直接引入原生TomSelect库而非Vue封装版，需在组件挂载后手动初始化并绑定事件：

mounted() {
  const selectInstance = new TomSelect(this.$refs.agentSelect, {
    // 自定义配置项
  });
  selectInstance.on('change', (selectedValue) => {
    this.changeAgentData(selectedValue);
  });
}

模板中添加ref标识：

<TomSelect
  ref="agentSelect"
  :disabled="disableForm"
  v-model="wareHouse.agent.id"
  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>

内容的提问来源于stack exchange，提问作者Skyent Group