已调用Vue指令，但未更新值

Question

下面我的大写指令适用于

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

但由于某些原因，它不适用于

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

大写指令：

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

我的代码有问题吗？我该怎么修？




Answer 1

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

.uppercase{
    text-transform: uppercase;
}

此外，还可以使用另一种选择：

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

如果你想使用指令，因为你使用v模型有一些问题，所以你可以把它与风格解决方案相结合：

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

这里是简单的代码为指令显示所有的解决方案