Vue.js中当Select2下拉框值为空时如何触发事件

问题背景 #

我在开发Vue.js应用，reviseReport组件内使用的Select2下拉框定义在NestedForm子组件中。需要在下拉框值变为null时触发对应事件，但通过jQuery直接操作DOM的方式并未生效。

现有代码 #

NestedForm.vue

<Select2
  ref="restrictionSelect" 
  v-model="Level1. name" <!-- 语法错误：变量名存在多余空格 -->
  show-all
  :settings="select2Settings"
  size="small"
  style="width: 100%; margin-left: 20px;" 
  class="custom-font width-max-50" 
  :display-key="false" 
  :options="level10ptions" <!-- 拼写错误：应为level1Options -->
  @update:modelValue="(value) =>" <!-- 箭头函数未完成 -->
/>

reviseReport.vue

<nested-form 
  ref="nestedForm"
  :data="restrictions"
  :source-options="sourceOptions"
  @handLeChange="handleRestrictionChange" <!-- 拼写错误：应为handleChange -->
/>

<script>
handleRestrictionChange({ Level, LevellId, levelId, levelId, value }}) { <!-- 参数重复、括号语法错误 -->
  if(this.hasRestrictionBlankError === true && isRestrictionExists){
    LevelSchemaObj.id = '';
    Level1SchemaObj. name =''; <!-- 语法错误：变量名存在多余空格 -->
    const selectElement = this.$refs.nestedForm?. $refs?. restrictionSelect; <!-- 语法错误：存在多余空格 -->
    $(selectElement).val(''). trigger ('change'); <!-- 语法错误：存在多余空格 -->
    return;
  }
}
</script>

问题原因 #

1. 违背Vue数据驱动原则：直接用jQuery操作DOM会绕过Vue的响应式系统，导致v-model绑定的值未同步，因此update:modelValue事件不会触发。
2. 代码存在拼写/语法错误：变量名、事件名拼写错误，代码中的多余空格会导致语法问题，影响逻辑执行。
3. Ref访问时机或方式错误：跨组件访问ref时，可能因为组件渲染时机或嵌套层级问题，无法正确获取到目标元素。

解决方案 #

1. 先修正代码中的拼写与语法错误 #

先把代码里的明显错误修复：

• handLeChange → handleChange
• Level1. name → Level1.name（去掉空格）
• level10ptions → level1Options
• 补全@update:modelValue的箭头函数，或绑定到方法上
• 修正参数重复、括号多余等语法问题

2. 采用Vue数据驱动的方式更新值（推荐） #

Vue的核心是数据驱动，应该通过修改绑定的v-model值来触发响应，而非直接操作DOM：

修改reviseReport.vue的handleRestrictionChange方法

handleRestrictionChange({ levelId, value }) {
  if (this.hasRestrictionBlankError && isRestrictionExists) {
    // 直接修改父组件传递给子组件的绑定数据
    this.restrictions.Level1.name = null; // 或设为''，根据业务需求
    // 无需操作DOM，v-model会自动同步到子组件的Select2
    return;
  }
}

3. 在子组件中主动触发空值事件 #

在NestedForm.vue中监听Select2的update:modelValue事件，当值变为null/空时，主动向父组件触发自定义事件：

<Select2
  ref="restrictionSelect" 
  v-model="Level1.name"
  show-all
  :settings="select2Settings"
  size="small"
  style="width: 100%; margin-left: 20px;" 
  class="custom-font width-max-50" 
  :display-key="false" 
  :options="level1Options"
  @update:modelValue="onSelectChange"
/>

<script>
export default {
  props: ['data'], // 确保接收父组件传递的data
  computed: {
    Level1() {
      return this.data.Level1; // 确保v-model绑定的是props传递的数据
    }
  },
  methods: {
    onSelectChange(value) {
      // 当值为null或空字符串时，触发自定义事件给父组件
      if (value === null || value === '') {
        this.$emit('select-blank');
      }
      // 保持v-model的双向绑定逻辑
      this.$emit('update:modelValue', value);
    }
  }
}
</script>

4. 父组件监听自定义事件 #

在reviseReport.vue中监听子组件的select-blank事件，处理空值逻辑：

<nested-form 
  ref="nestedForm"
  :data="restrictions"
  :source-options="sourceOptions"
  @handleChange="handleRestrictionChange"
  @select-blank="handleSelectBlank"
/>

<script>
export default {
  methods: {
    handleSelectBlank() {
      // 这里处理下拉框值变为null/空时的业务逻辑
      console.log('Select2下拉框已清空');
      // 你的业务代码
    }
  }
}
</script>

5. 若必须使用DOM操作（不推荐） #

如果因特殊场景需要直接操作Select2 DOM，需确保获取正确的实例并同步Vue数据：

const nestedForm = this.$refs.nestedForm;
if (nestedForm) {
  const selectComp = nestedForm.$refs.restrictionSelect;
  if (selectComp) {
    // 获取Select2对应的原生select元素
    const $select = $(selectComp).find('select');
    $select.val(null).trigger('change');
    // 手动同步Vue绑定的值
    nestedForm.Level1.name = null;
  }
}

内容的提问来源于stack exchange，提问作者Jay patel