使用Vuetify在文本字段标签旁边显示工具提示图标

Question

我正在使用vuetify的组件工具提示。但是我不确定如何在标签旁边实现它。

这就是我现在拥有的方式。

<v-tooltip right>
  <v-icon slot="activator" dark color="primary">info</v-icon>
  <span>Please enter the user information correctly.</span>
</v-tooltip>
<v-text-field label="Information" v-model="dummy.info"> </v-text-field>

我想在信息标签旁边添加工具提示图标。请建议我该如何实现。

更新1

<v-text-field label="Information" v-model="dummy.info">
 <template v-slot:append>
  <v-icon slot="activator" dark color="primary">info</v-icon>
  <span>Please enter the user information correctly.</span>
 </template>
</v-text-field>

更新2

<v-text-field
  v-model="dummy.info"
  label='Information'
  append-icon="info"
  suffix="Please enter the user information correctly."
/>

Answer 1

您可以使用v-text-field插槽将内容附加到append。

https://vuetifyjs.com/en/components/text-fields#api

<v-text-field>
  <template v-slot:append>
    <v-icon slot="activator" dark color="primary">info</v-icon>
    <span>Please enter the user information correctly.</span>
  </template>
</v-text-field>

对于Vuetify 1.xx

<v-text-field
  v-model="dummy.info"
  label="Information"
  append-icon="info"
  suffix="Please enter the user information correctly."
/>

https://v1.vuetifyjs.com/en/components/text-fields#example-prefixes-and-suffixes https://v1.vuetifyjs.com/en/components/text-fields#example-icon