专栏首页杰的记事本Vue directive中修改v-model值

Vue directive中修改v-model值

最近在重构一个旧项目,这个项目用到了一些bootstrap的插件,我们想保留这些插件,就会遇到一些问题,比如我们把插件封装成了directive,在双向绑定方面需要做如下处理:

  1. <div v-custom= “customData”>Test</div> , 我们想要在directive中,对customData进行改变,可以使用 vnode.context[binding.expression]进行赋值即可,如下例子:
 Vue.directive("custom", {
  bind: function(element, binding, vnode) {
    $(element).on("click", function() {
      vnode.context[binding.expression] = false; // sync binding.value = false;
    });
  }
});

2. <input v-model=”customValue” v-custom= “customData”></> , 我们知道v-model其实是input事件改变value的语法糖,所以我们想要在directive中对v-model进行改变,可以使用dispatchEvent(‘input’)的方法,如下例子:

 // 这个函数是从vue.js源码中复制的,方便我们手动触发事件
function trigger(el, type) {
    var e = document.createEvent("HTMLEvents");
    e.initEvent(type, true, true);
    el.dispatchEvent(e);
  }
 Vue.directive("custom", {
  bind: function(element, binding, vnode) {
    $(element).on("focus", function() {
       element.value = 'FOCUS';
       trigger(element, "input");
    });
   }
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6的异步编程之async

    异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题。

    javascript.shop
  • JavaScript模块循环加载

    “循环加载”(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本。

    javascript.shop
  • vuejs简单介绍

    使用vue编写网页是一个让人愉悦的过程,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全.

    javascript.shop
  • VMware vSAN双活(延伸集群)站点间带宽设计

    笔者之前也分享过vSAN延伸集群的一些资料。在双活的设计中,站点之间带宽预估、脑列处理等问题,都是需要重点考虑的。本次向大家分享一下vSAN带宽带宽的设...

    魏新宇
  • arm平台根据栈进行backtrace的方法

    嵌入式设备开发过程中,难免会遇到各种死机问题。这类问题的定位一直是开发人员的噩梦。 死机问题常见定位手段如下:

    coderhuo
  • 7个 ffmpeg 实例,个个都不简单,你敢看看吗?

    我们最近持续分享了一系列的关于音视频处理的文章,总是围绕着 ffmpeg 处理工具展开的。这个应用程序所支持的选项品类繁多功能复杂,组装起来威力无比。

    程序员小助手
  • ElasticSearch必备知识:从索引别名、分词器、文档管理、路由到搜索详解

    如果希望一次查询可查询多个索引。 如果希望通过索引的视图来操作索引,就像数据库库中的视图一样。 索引的别名机制,就是让我们可以以视图的方式来操作集群中的索引...

    数据和云01
  • 瓜子二手车市场分析(Scrapy+Tableau)

    本文对瓜子网杭州二手车进行了爬取和简单分析,一方面是为了进一步熟练使用Python的Scrapy爬虫框架,另一方面是为了熟悉Tableau强大的数据可视化功能。

    luanhz
  • OKUEX、数字货币合约,全国总代

    OKUEX数字合约交易平台,新加坡OKUEX数字合约基金会官方平台,专注于数字货币、加密货币合约交易,无需法币出入金,零客诉平台,全套区块链技术支持,平台全部以...

    用户2609913
  • 【应用安全】微软的安全开发生命周期(SDL)

    安全开发生命周期(SDL)即Security Development Lifecycle,是一个帮助开发人员构建更安全的软件和解决安全合规要求的...

    Bypass

扫码关注云+社区

领取腾讯云代金券