Vuetify是否存在隐藏v-text-field附加图标的功能

Question

我有一个带有追加图标的表单v-textfield，用于在单击时激发方法是否有条件地隐藏/显示此附加图标？

即使我有条件地禁用v-text-field，附加图标仍然可以点击。。。

<v-text-field
name="email"
autocomplete="off"
v-on:input="userEmailChanged"
:placeholder="$t('lang.views.member.enter_new_email')"
:readonly="isReadOnly"
:label="$t('lang.views.home.contactForm.email')"
v-model="user.email"
prepend-icon="email"
append-icon="edit"
@click:append="editEmail"
v-validate="'email'"
data-vv-name="email"
:error-messages="errors.collect('email')">
</v-text-field>

我可以在editEmail方法中插入一个测试，但在视觉上，我更喜欢在启动editMail方法时隐藏图标。。。。

Answer 1

只要有条件地使用道具，只要你想隐藏它，就把条件设置为false：

<v-text-field 
:append-icon="showIcon ? 'edit' : undefined"
@click:append="editEmail" 
></v-text-field>
data: () => ({
showIcon: true
}),
methods: {
editMail() {
// your code code
this.showIcon = false;
}
}

如果要使其再次可见，请将其还原为true。

---

注意：如果你想要这个功能来清除输入，有一种特定的方法可以通过使用道具(来自官方示例(来做到这一点：

<v-text-field 
clearable 
clear-icon="mdi-close-circle"
@click:clear="clearMessage"`
/>
methods: {
clearMessage () {
this.message = ''
},
}