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

0
(0)

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

这篇文章有用吗?

平均评分 0 / 5. 投票数: 0

到目前为止还没有投票!成为第一位评论此文章。

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

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