Vuejs + Vuetifyjs + v-текстовое поле текстовое преобразование заглавными буквами

Question

Я пытаюсь добавить v-text-input, и я хочу текст в верхнем регистре (в css: text-transform: uppercase).Я не могу добавить «класс», я не могу добавить «стиль».Как я могу это сделать?Вещи, которые я пробовал:

 <v-text-field class="myUpperCase" v-model="dto" label="Username" required></v-text-field>
 <v-text-field style="text-transform: uppercase" v-model="dto" label="Username" required></v-text-field>

Как мне получить верхний регистр в текстовом поле?Благодарю./ Yore

Answer 1

Лучшее решение - использовать маски v-текстового поля. Вы можете указать все, что вы хотите, то есть для номерных знаков Испании, вы можете набрать: mask = "#### AAA", что позволит использовать любой символ CHAR заглавными буквами. Больше информации здесь: https://vuetifyjs.com/en/components/text-fields#

Answer 2

Потому что v-text-field снова и снова переносит ввод с другими тегами. Если вы откроете инспектор браузера, структура будет выглядеть следующим образом:

<div class="v-input my-input v-text-field v-input--is-label-active v-input--is-dirty">
  <div class="v-input__control">
    <div class="v-input__slot">
      <div class="v-text-field__slot"><input type="text"></div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages">
        <div class="v-messages__wrapper"></div>
      </div>
    </div>
  </div>
</div>

Если вы хотите использовать css для достижения цели, вам нужно использовать селектор css для применения ваших стилей, таких как .my-input input:

PS: В приведенном ниже примере class=my-input находится на верхнем уровне, а не на элементе ввода. Ваш второй подход, который использует style="bla...bla..", также будет там.

new Vue({
  el: '#app',
  data: {
    value: 'test abc'
  },
});

.my-input input{
  text-transform: uppercase
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.1.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.1.14/dist/vuetify.min.js"></script>

<v-app id="app">
  <v-text-field class="my-input" :value="value">
  </v-text-field>
</v-app>

Answer 3

Вы пытаетесь добавить директиву v-model в компоненте <v-text-field>, v-текстовое поле поддерживает v-model, но у вас есть больший контроль, если вместо этого вы используете опору value, которую вы можетеиспользовать в качестве тега <input>.В конце концов v-model - это просто комбинация value и события.Поэтому все, что вам нужно сделать, это использовать функцию toUpperCase().Поэтому решение, которое я представляю, выглядит так:

<v-text-field type="text" :value="dto.toUpperCase()" @input="dto = $event.target.value.toUpperCase()">

Answer 4

Используйте функцию toUpperCase():

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