Как мне создать всегда заглавные буквы в vue.js?

Question

Я создаю форму, используя vue.js, и мне нужно создать входные данные в vue, которые всегда пишутся с большой буквы.Я знаю, что могу использовать свойство css

text-transform: uppercase;

, а затем преобразовать данные перед отправкой, используя

data.someData.toUpperCase()

Но мне интересно,есть более разумный способ сделать это в vue.js.В ответ мы можем создавать контролируемые входы и легко это делать.Есть ли что-то подобное в Vue.js?

Мне удалось сделать это с помощью вычисляемых полей, однако мне пришлось бы создавать вычисляемый метод получения и установки для каждого ввода в форме.Есть ли лучший способ сделать это?

Answer 1

Поскольку у вас мало кода для запуска, вам следует вручную связать события с вашим текстовым полем, а затем обработать там верхний регистр.

Обработку событий из текстового поля можно выполнить, добавив input обработчик событий для них, а затем снова обновить начальное состояние.

<input :value="text" @input="updateText($event.target.value)"/>

export default {
    data() {
        return {
            text: '',
        }
    },
    methods: {
        updateText(newValue) {
            this.value = newValue.toUpperCase();
        },
    }
}

Вы также можете сделать это встроенным в шаблон, но это может затруднить чтение в зависимости от ваших предпочтений стиля кода

<input :value="text" @input="text = $event.target.value.toUpperCase()"/>

Answer 2

Вы можете создать пользовательскую директиву.

Vue.directive( 'touppercase', {
    update (el) {
        el.value = el.value.toUpperCase()
    },
})

И затем использовать ее там, где вам нужно.Например:

<input type="text" v-model="modelfield" v-touppercase>