从自定义指令 VueJS 更新模型

2024-02-12

我目前使用 Vue.JS 2.0,我想从自定义指令更新一个 Vue 实例的模型,但我正在寻找一种很好的方法来做到这一点,这是因为我试图创建一个实现 JQueryUI-Datepicker 代码的自定义指令如下:

<input type="text" v-datepicker="app.date" readonly="readonly"/>

Vue.directive('datepicker', {
  bind: function (el, binding) {
    $(el).datepicker({
      onSelect: function (date) {
        //this is executed every time i choose an date from datepicker
        //pop.app.date = date; //this work find but is not dynamic to parent and is very dirty
        Vue.set(pop, binding.expression, date); //this should work but nop
      }
    });
  },
  update: function (el, binding) {
    $(el).datepicker('setDate', binding.value);
  }
});

var pop = new Vue({
    el: '#popApp',
    data: {
        app: {
            date: ''
        }
    }
});

有人知道如何从指令以动态方式更新 pop.app.date ,我知道在这个示例中,binging.expression 返回 app.date 和 date 返回在日期选择器中选择的当前日期,但我不知道如何更新模型从指令


这就能解决问题:

// vnode (third argument is required).
bind: function (el, binding, vnode) {
    $(el).datepicker({
        onSelect: function (date) {
            // Set value on the binding expression.
            // Here we set the date (see last argument).
            (function set(obj, str, val) {
                str = str.split('.');
                while (str.length > 1) {
                    obj = obj[str.shift()];
                }
                return obj[str.shift()] = val;
             })(vnode.context, binding.expression, date);
         }
    });
},

参考:https://stackoverflow.com/a/10934946/2938326 https://stackoverflow.com/a/10934946/2938326

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从自定义指令 VueJS 更新模型 的相关文章

随机推荐

  • Stripe:没有这样的令牌。测试模式下存在类似的对象,但使用实时模式密钥来发出此请求

    在实时模式下使用 Stripe 时 我收到以下 PHP 错误 没有这样的令牌 tok fgfhn 测试模式下存在类似的对象 但使用实时模式密钥来发出此请求 在 Stripe 测试模式下一切运行良好 并且我已切换到实时 API 密钥 我像这样
  • 检测字符串是否包含字符串数组的任何元素

    如何检测字符串是否包含字符串数组 单词 的任何成员 这是数组 let str String house near the beach let wordGroups String beach waterfront with a water v
  • Javascript 中的事件处理程序、闭包和垃圾收集

    我的应用程序尚未遇到内存泄漏 但我担心将来可能出现问题 我想知道是否做这样的事情 SomeClass prototype someMethod function var that this this div2 click function
  • 使用 WebGL 进行 2D 图像处理

    我打算用 JS 创建一个简单的照片编辑器 我的主要问题是 是否可以创建实时渲染的滤镜 例如 调整亮度和饱和度 我所需要的只是一个 2D 图像 我可以在其中使用 GPU 应用滤镜 我读过的所有教程都非常复杂 并且没有真正解释 API 的含义
  • Go的类型推断算法

    Go编译器使用什么类型推断算法 我尝试在 golang 上查找此内容 但找不到文档 我很想假设这将是欣德利 米尔纳 但我想确定一下 Go 当然不使用 Hindley Milner 你为什么那么想 实际上 Go 一般没有类型推断 仅与 构造
  • 如何创建本地主机服务器来运行 AngularJS 项目

    我使用 XAMPP 和 JetBrains WebStorm 来运行 AngularJS 项目 但结构复杂 性能低下 还有其他方法来运行 AngularJS 项目吗 如果您正在运行node jshttp服务器 https www npmjs
  • 使用 jest.useFakeTimers() 时,为什么 setImmediate 不会无限期超时?

    使用时jest useFakeTimers 为什么setTimeout and setImmediate 表现不同 beforeAll jest useFakeTimers afterAll jest useRealTimers descr
  • 如何在 Hbase 中连接两个表

    Problem 我是 Hbase 新手 遇到了需要连接两个表的情况 假设我有 Employee 表和 Department 表都是在 Hbase 中创建的 通过阅读 Hbase 的实际操作 我了解到我们无法连接 Hbase 中的表 解决方案
  • 将元素添加到 Iframe

    我正在创建一个包含 iframe 的页面 我的目标是创建一个将添加到 iframe 内容头部的 javascript 但我总是收到暗示 iframe contentDocument 为空的错误 主页代码
  • 无法操作 jQuery 中 ajax 请求插入的数据

    调用服务器并将其返回的数据转换为表后 我使用 jQuery 的 html 语法将其插入页面中 之后数据出现在页面中 但我无法使用 jQuery 操作它 继承人的代码
  • 在 numpy 中使用 2d 掩码掩码 3d 数组

    我有一个 3 维数组 我想使用一个 2 维数组来屏蔽它 该数组的维度与 3 维数组最右边的两个数组的维度相同 有没有办法在不编写以下循环的情况下执行此操作 import numpy as np nx 2 nt 4 field3d np ra
  • 同一角色的实例之间的 Azure 网络通信

    同一角色的多个角色实例是否可以通过获取所有这些实例侦听的特定端点的 VIP 虚拟 IP 地址来相互通信RoleEnvironment 如果是这样 返回的 VIP 可以负载均衡到调用者 的RoleEnvironment方法 实例本身 角色实例
  • 设置 UINavigationbar 的标题不起作用

    我浏览了一些在线教程 但没有任何效果 这是我的 viewController 的代码 import UIKit class ViewController UINavigationController let textView UITextV
  • 在 MySQL 中查找下一个可用的 id

    我必须在 MySQL 数据库中找到下一个可用的 id 如果数据库中有 5 个数据 我必须获取下一个可用的插入位置 即 6 我怎样才能做到这一点 我用过MAX id 但是当我从数据库中删除一些行时 它仍然保留未更新的旧最大值 更新2014 1
  • Flask|Jinjia2|Javascript:将 Flask 模板变量传递到 Javascript

    将变量从 Flask 模板传递到 Javascript 文件的最佳方法是什么 这是我的代码 我的网络应用程序中有一个简单的视图 webapp route bars def plot d3 bars return render templat
  • 奇数个 a 的正则表达式

    我在解决以下练习时遇到问题 希望得到任何帮助 令 a b 我需要为包含奇数个 a 的所有字符串给出一个正则表达式 感谢您的时间 b ab ab ab 它的主要部分是 ab ab 它枚举了偶数个的所有可能性as 最后 还有一个额外的a必须存在
  • 将 MIME 转换为 RichText

    我想转换多米诺骨牌文档字段Data Type MIME Part into a Data Type Rich Text in backend with SSJS or Java 我尝试过与 doc computeWithForm true
  • 无法解析 RubyMine 中的文件

    我正在尝试将 RubyMine v6 3 3 用于我的 Rails 项目 我添加后bootstrap sass宝石根据其说明 在https github com twbs bootstrap sass https github com tw
  • GWT Maven 插件 -- gwt:run 可以工作,但 gwt:compile 不能。为什么?

    我正在使用 gwt maven plugin 来管理 GWT 项目 我用gwt run目标始终以 开发模式 本地运行进行测试 我现在想将我的项目编译成 war 以部署在 Tomcat 上 当我跑步时gwt compile但是 我收到编译错误
  • 从自定义指令 VueJS 更新模型

    我目前使用 Vue JS 2 0 我想从自定义指令更新一个 Vue 实例的模型 但我正在寻找一种很好的方法来做到这一点 这是因为我试图创建一个实现 JQueryUI Datepicker 代码的自定义指令如下