如何在表单向导或jquery的步骤验证中调用Vue Js方法?

Question

我使用了 vue js 的直接链接，当我从下拉列表中选择选项时，我想调用 onchange 方法。当我将选择标签从向导表单/步骤验证中取出时，它工作正常。当我输入向导表单或步骤表单 vue 方法时，不会调用。我可以访问 vue 数据，但不能访问 vue 方法。

<form method="POST" enctype="multipart/form-data" class="wizard-form steps-validation" id="form">
<div id="calculation">
<div class="col-md-6">
<div class="form-group">
<label>Demo: <span class="text-danger">*</span></label>
<select name="country" data-placeholder="Select country" class="form-control form-control-select2" data-fouc  v-model="country" v-select="country" @change="onChange($event)">
<option value="1">India</option>
<option value="2">USA</option>
</select>
</div>
</div>
</div>
</form>

<script>
Vue.directive('select', {
twoWay: true,
bind: function (el, binding, vnode) {
$(el).select2().on("select2:select", (e) => {
el.dispatchEvent(new Event('change', { target: e.target }));
});
},
});
var app = new Vue({
el: '#calculation',
data: {
country: ''
},
mounted: function () {
this.onChange();
},
methods: {
onChange(event) {
console.log('called change method');
}
}
});
</script>

Answer 1

如果我正确理解了您的问题，那么您的解决方案是 .native 事件修饰符