已调用 Vue 指令但未更新值

Question

我下面的 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();
      }
    }
  }

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

Answer 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用于显示所有解决方案的指令

已调用 Vue 指令但未更新值

Vue directive called but not updating value

vue.js

bootstrap-vue

vue-directives