Vue directive called but not updating value

Question

My uppercase directive below works fine with <input>:

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

But for some reason, it doesn't work with <b-form-input>:

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

The uppercase directive:

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

Is there something wrong in my code ? How should I fix it ?

I would need to use many computed properties while a directive can be re-used. — DevonDahon, May 08 '20 at 17:32
in the first input, the uppercase directive change the last inserted character to uppercase but doesn't affect the last character in the foo variable in the data... is it not a problem ? — Farouk M, May 08 '20 at 18:36
@LannyBose https://bootstrap-vue.org/docs/components/form-input#comp-ref-b-form-input — DevonDahon, May 08 '20 at 19:06

score 3 · Accepted Answer · answered May 08 '20 at 19:27

If you want just change to uppercase easiest way is use style:

.uppercase{
    text-transform: uppercase;
}

Also use filter can another choice:

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

And if you want use directive as you use v-model got some problems so you can combine it with style solution:

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

Here is simple codepen for directive for show all solutions

Vue directive called but not updating value

1 Answers1