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

Question

Я пытаюсь добавить подсказку или сообщение об ошибке или какой-либо вид проверки (все приемлемо) в текстовое поле, используя 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

Answer 1

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

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

Вот кодовая ручка https://codepen.io/anon/pen/GeVQLG