如何在表单向导或 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 事件修饰符