Как я могу условно отобразить подсказку для текстового поля, используя VueJS и Vuetify?

#vuejs2 #vuetify.js

Вопрос:

Я пытаюсь добавить подсказку или сообщение об ошибке или какую-либо проверку (что угодно приемлемо) к текстовому полю, используя Vuetify.js. Подсказка должна появиться, только если пользователь нажимает на кнопку «Поиск», в то время как поле поиска рядом с ним пустое. Я застрял, пытаясь найти способ сделать это. Мой текущий код приведен ниже:

 new Vue({
  el: '#app',
  data: () => ({
    customSearchText: '',
    validate: null
  }),
  computed: {
    form() {
      return {
        validate: this.validate
      }
    }
  },
  watch : {
    
  },
  methods: {
    searchCustomText() {
    }
  }
})

 .v-input.v-text-field.theme--light {
  width: 50%;
  margin-left: 120px;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-text-field hint="Fill the field to view results" append-icon="search"
    v-model="customSearchText" @click:append="searchCustomText">
  </v-text-field>
</div>

Ссылка на Codepen: https://codepen.io/anon/pen/jJjZNQ

1. Я исправил вашу орфографию и грамматику, я переработал заголовок вашего вопроса, чтобы он был более понятным, и я переместил ваш пример кода в строку. Этот вопрос может быть немного слишком широким, но, по крайней мере, теперь, вероятно, кто-то, знакомый с Vue, сможет на него каким-то образом ответить.

2. Действительно ценю это. Спасибо. Я все еще новичок в мире веб-разработки, поэтому, пожалуйста, извините за любые небольшие ошибки.

3. Также исправлен код, чтобы он выполнялся локально в StackOverflow.

Ответ №1:

Подсказки отображаются только тогда, когда текстовое поле сфокусировано. Итак, вы были на правильном пути, вам просто нужно сфокусировать текстовое поле в методе searchCustomText , который вызывается при нажатии на значок поиска. Вам нужно будет добавить ссылку на v-text-field, чтобы вы могли ссылаться на нее в методе.

Я также предположил, что вам не нужна подсказка, когда в текстовом поле что-то есть, поэтому я добавил else, чтобы установить значение isFull равным true.

Вот codepen https://codepen.io/anon/pen/GeVQLG