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

前Thoughtworks-杨焱

发布于 2022-02-19 02:29:21

2K00

代码可运行

文章被收录于专栏：杨焱的专栏杨焱的专栏

运行总次数：0

代码可运行

发表于2018-05-102019-01-01 作者 wind

为什么要同步到 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;
                        }
                    });
                }
            });
        }
    });