如何根据Vuetify v-text-field的验证状态动态修改append-icon

针对你提出的两个需求，直接给出实现方案：

选项1：验证出错显示红色警告图标，验证通过显示绿色对勾 #

通过绑定append-icon和append-icon-color属性，结合组件的内置验证状态（valid、isDirty）来动态切换：

模板代码 #

<v-text-field
  v-model="firstname"
  :rules="nameRules"
  class="text-field"
  :append-icon="getAppendIcon"
  :append-icon-color="getAppendIconColor"
  placeholder="Enter first name"
  hide-details="auto"
  outlined
  required
  ref="firstNameField"
></v-text-field>

脚本代码 #

export default {
  data() {
    return {
      firstname: '',
      nameRules: [
        v => !!v || 'First name is required',
        v => v.length >= 2 || 'First name must be at least 2 characters'
      ]
    };
  },
  computed: {
    getAppendIcon() {
      const field = this.$refs.firstNameField;
      if (!field) return '';
      
      // 验证通过时显示对勾
      if (field.valid) return 'mdi-check-circle';
      // 字段已修改且验证失败时显示警告图标
      if (field.isDirty && !field.valid) return 'mdi-alert-circle-outline';
      
      return '';
    },
    getAppendIconColor() {
      const field = this.$refs.firstNameField;
      if (!field) return '';
      
      return field.valid ? 'green' : (field.isDirty && !field.valid ? 'red' : '');
    }
  }
};

选项2：仅在字段出错时显示错误图标，否则隐藏 #

只需要判断字段是否已修改且验证失败，动态控制图标的显示：

模板代码 #

<v-text-field
  v-model="firstname"
  :rules="nameRules"
  class="text-field"
  :append-icon="hasError ? 'mdi-alert-circle-outline' : ''"
  :append-icon-color="hasError ? 'red' : ''"
  placeholder="Enter first name"
  hide-details="auto"
  outlined
  required
  ref="firstNameField"
></v-text-field>

脚本代码 #

export default {
  data() {
    return {
      firstname: '',
      nameRules: [
        v => !!v || 'First name is required',
        v => v.length >= 2 || 'First name must be at least 2 characters'
      ]
    };
  },
  computed: {
    hasError() {
      const field = this.$refs.firstNameField;
      // 字段已修改且验证不通过时显示图标
      return field?.isDirty && !field?.valid;
    }
  }
};

补充说明 #

• 上述方案利用Vuetify组件内置的valid（验证是否通过）和isDirty（字段是否被用户修改过）状态，判断逻辑更贴合组件的原生验证流程。
• 如果不想使用ref，也可以手动通过nameRules验证输入值，但需要自行处理“是否已触碰字段”的逻辑，不如使用组件内置状态便捷。

内容的提问来源于stack exchange，提问作者Wasim Al-Haddad