vue.js - Vue 自定义指令操作el值为何未更新?

问题描述

问 题

以下只选取了问题相关的代码
调用模版:

<input type="text" name="user" style="text-transform:uppercase;" v-model="form.user" v-validate="{max: 2,direction: 'right'}">

全局指令:

/* eslint-disable */
let validate = {},
    dom, // el对象
    msg, // 消息内容
    direction, // 消息盒子的朝向
    lock = false // 消息锁
/* eslint-enable */

/**
 * 规则
 * 规则名 {string}
 * 如果值是 {object} 只可接纳1个参数 @data
 * 如果值是 {function} 可接纳2个参数 @val, @data
 * 第1参数 @val  指令值
 * 第2参数 @data 被检测值
 * @direction 该规则用来指定message的出现方位,不建议变更!
 */
const regular = {
  'direction': (val, data) => {
    direction = val
    return data
  },
  'max': (val, data) => {
    if (typeof data === 'string' && data.length > val) {
      msg = '最多' + val + '个字'
      return data.slice(0, val)
    } else if (data > val) {
      msg = '最大' + val
      return val
    } else return data
  }
}

/**
 * 遍历规则
 * @param  {object} obj  需要执行的规则对象
 * @param  {all} data 被检查的值
 * @return {all}      根据规则返回的值
 */
function traversal (obj, el) {
  /* eslint-disable */
  let key, // 规则键名
      tempValue = dom.value // 规则过滤后的值
  /* eslint-enable */
  for (var item in obj) {
    key = obj[item]
    tempValue = typeof regular[item] === 'object' ? regular[item][key](tempValue) : regular[item](key, tempValue)
  }

  if (tempValue === dom.value) {
    lock = false
    // message(direction)
  } else if (!lock) {
    lock = true
    // message(direction, msg)
  }
  dom.value = tempValue
  // set_formValue(dom.value)
  return
}

validate.install = function (Vue, options) {
  Vue.directive('validate', {
    update: function (el, binding) {
      dom = el
      traversal(binding.value, el)
    }
  })
}

module.exports = validate

基本逻辑就是我表单验证不能超过2个字.如果超过取2两位,验证判断后会把新值给el.value

现在我输入A正常,AA正常,AAA验证后返回值AA到表单内,弹出消息.
然后到这里就有问题了.
如果再次输入相同的值AAA,相关JS没有运行.表单内会有3个A.
如果输入不同的值且大于2位AAS,会触发相关验证,指令最后会把新值交给el.value.
理论上现在el.value === AA,输出测试结果也是对的.
但我在下次触发指令时发现,比如我实际输入的是AAD,可el.value的值还是上次的AAS.这是怎么回事?

---

另外关于自定义指令做成插件的形式,我必须在.babelrc中把"transform-runtime"它去掉才行,否则就要报错.这是什么问题造成的?

解决方案

https://zhuanlan.zhihu.com/p/...

这和 v-model 语法糖有关，仅改变 value 并不会改变通过 v-model 所绑定的数据

这篇关于vue.js - Vue 自定义指令操作el值为何未更新?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！