Vue директива вызывается, но не обновляет значение - PullRequest
Новая
       153

Vue директива вызывается, но не обновляет значение

0 голосов
/ 08 мая 2020

Моя 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();
      }
    }
  }

Что-то не так в моем коде? Как исправить?

1 Ответ

1 голос
/ 08 мая 2020

Если вы хотите просто перейти на верхний регистр, самым простым способом является использование стиля: 

.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';
    }
});

Вот простой код для директивы для отображения всех решений

...