Vue3中如何从jQuery事件访问data()内的selectedEvent变量？

问题根源很明确：在jQuery的change事件回调里，this指向的是触发事件的DOM元素（也就是Select2绑定的select标签），不是Vue组件实例，所以直接用this.selectedEvent会找不到变量。

下面给你几个靠谱的解决办法：

方法1：提前保存Vue实例的this #

在mounted钩子开头把Vue实例的this存到一个变量里，比如vm，然后在回调里用这个变量访问data中的值。

mounted() {
  // 把Vue实例的this存起来
  const vm = this;
  // 初始化Select2并绑定change事件
  $('#your-select-id').select2().on('change', function() {
    const selectedVal = $(this).val();
    // 给隐藏input赋值
    $('#hidden-input-id').val(selectedVal);
    // 用保存的vm访问Vue的data变量
    vm.selectedEvent = selectedVal;
  });
}

方法2：用箭头函数绑定外层this #

箭头函数不会创建自己的this上下文，会继承外层作用域的this（也就是Vue实例的this）。但要注意，此时回调里的this不再是DOM元素，需要通过event.target获取选中的元素。

mounted() {
  $('#your-select-id').select2().on('change', (event) => {
    const selectedVal = $(event.target).val();
    $('#hidden-input-id').val(selectedVal);
    // 这里的this就是Vue实例，可以直接访问data变量
    this.selectedEvent = selectedVal;
  });
}

方法3：用Vue的v-model替代手动操作隐藏input #

更符合Vue开发习惯的做法是给隐藏input绑定v-model，这样只要更新data里的selectedEvent，隐藏input的值会自动同步，不用手动调用jQuery赋值。

模板部分： #

<input type="hidden" v-model="selectedEvent" />
<select id="your-select-id">
  <!-- 选项内容 -->
</select>

脚本部分： #

mounted() {
  const vm = this;
  $('#your-select-id').select2().on('change', function() {
    // 只需要更新Vue的data变量，v-model会自动同步隐藏input的值
    vm.selectedEvent = $(this).val();
  });
}

额外提示：如果用