Vue.js Vuetify是否仍然可以隐藏v-text-field追加图标

我有一个表单v-textfield，它带有一个append图标，可以在单击时触发一个方法 是否有条件隐藏/显示此附加图标

即使我有条件地禁用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方法时隐藏图标….

只要有条件地使用该属性，并在需要隐藏时将该条件设置为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;
    }
}

---

只要有条件地使用该道具，并在需要隐藏时将该条件设置为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;
    }
}

---

谢谢你！！！它工作得很好。。。再见，谢谢！！！很好。。。看见