当使用 jquery 插件操作 input 时同步 vue 中绑定的变量办法

为什么要同步到 vue 上绑定的变量呢,因为如果我们不更新绑定的变量的值,vue 下次刷新组件的时候,就会将旧的值更新到 input 上。

我一般使用的方法是在 vue 中定义自定义指令,函数中可以获取到 vnode,有了 vnode 就可以获取vnode.context也就是 vue 对象,有了 vue 对象就可以将新的值设置到v-model绑定的那个变量上,因为这是指令,还不确定有多少个地方使用到了这个指令,所以可以通过从 el 上获取到一些信息,来帮助获取对应的 v-model 对象。例如下面这个自动完成的 jquery 插件的例子:

    Vue.directive('myautocomplete', {
        inserted: function (el,binding,vnode,oldVnode) {
            var jqEl = jQuery(el);
            console.log(jqEl);
            if (!jqEl.data('history')) {
                return;
            }
            const fieldId = jqEl.data('fieldid');
            jqEl.devbridgeAutocomplete({
                lookup: function (query, done) {
                    var result = {
                        suggestions: [{value:'蔡家坡',data:1},{value:'徐家庄',data:2}]
                    };
                    done(result);
                },
                minChars: 0,
                onSelect: function (suggestion) {
                    vnode.context.fields.forEach(function(field){
                        if(field.fieldId == fieldId){
                            field.value = suggestion.value;
                        }
                    });
                }
            });
        }
    });

Leave a Comment

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据