如何使用 VueJS 和 Vuetify 有条件地显示文本字段的提示？答案

【问题标题】：How can I display a hint conditionally for a text field, using VueJS and Vuetify?如何使用 VueJS 和 Vuetify 有条件地显示文本字段的提示？
【发布时间】：2019-03-28 13:36:16
【问题描述】：

我正在尝试使用 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

【问题讨论】：

我修正了你的拼写和语法，我修改了你的问题标题更清晰，我移动了你的示例代码内联。这个问题可能有点太宽泛了，但至少现在熟悉 Vue 的人可能会以某种方式回答。
真的很感激。谢谢你。我对 Web 开发的世界还很陌生，所以请原谅任何小错误。
还修复了代码，使其可以在 StackOverflow 中本地运行。

标签： vuejs2 vuetify.js

【解决方案1】：

提示仅在文本字段获得焦点时显示。所以你在正确的轨道上，你只需要关注方法 searchCustomText 中的文本字段，单击搜索图标时调用该方法。您需要向 v-text-field 添加一个 ref，以便您可以在方法中引用它。

我还假设当文本字段中有内容时您不想要提示，所以我添加了一个 else 来将 isFull 设置为 true。

这里是密码笔https://codepen.io/anon/pen/GeVQLG

【讨论】：

这是完美的。我希望我能多次投票给你。谢谢！！