调用 Vue 指令但不更新值答案

【问题标题】：Vue directive called but not updating value调用 Vue 指令但不更新值
【发布时间】：2020-05-08 17:24:40
【问题描述】：

我下面的uppercase 指令与<input> 配合得很好：

<input
  type="text"
  v-model="foo"
  v-uppercase
>

但由于某种原因，它不适用于<b-form-input>：

<b-form-input
  type="text"
  v-model="foo"
  v-uppercase
></b-form-input>

uppercase 指令：

  directives: {
    uppercase: {
      update: function (el) {
        el.value = el.value.toUpperCase();
      }
    }
  }

我的代码有问题吗？我应该如何解决它？

【问题讨论】：

请问你为什么不使用计算属性？
我需要使用许多计算属性，而指令可以重复使用。
你可以使用过滤器来代替v-model="foo | uppercase"
什么是b-form-input？
在第一个输入中，大写指令将最后插入的字符更改为大写，但不影响数据中 foo 变量中的最后一个字符...不是问题吗？

标签： vue.js bootstrap-vue vue-directives

【解决方案1】：

如果您只想更改为大写，最简单的方法是使用样式：

.uppercase{
    text-transform: uppercase;
}

另外使用过滤器也可以选择：

    filters: {
        uppercase: function(v) {
            return v.toUpperCase();
        }
    }

如果你想在使用 v-model 时使用指令会遇到一些问题，所以你可以将它与样式解决方案结合起来：

Vue.directive("uppercase", {
    bind(el, binding, vnode) {
        el.style.textTransform = 'uppercase';
    },
    update(el, binding, vnode) {
        el.style.textTransform = 'uppercase';
    }
});

这里是 simple codepen 用于显示所有解决方案的指令

【讨论】：