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。

---

注意：如果您希望使用此功能清除输入，可以通过使用道具 (from official example) 来执行此操作：

<v-text-field 
    clearable 
    clear-icon="mdi-close-circle"
    @click:clear="clearMessage"`
/>

methods: {
    clearMessage () {
        this.message = ''
    },
}