如何在Vuetify+Vue.js动态表单中实现多个密码框的单独显隐切换

云原生阿岚

2026-9-24

问题根因

你当前所有密码框共用了同一个全局的showPasswordIcon状态变量，修改这个变量会同步触发所有密码框的显隐状态更新，才会出现切换一个全变的问题。

解决步骤

替换全局显隐状态，改用对象存储每个密码字段的单独显隐状态，用formField.key作为索引区分不同字段
把密码框的显隐相关绑定都改成对应字段的独立状态
切换事件触发时仅修改当前字段对应的状态值

代码修改示例

1. Script部分调整（以Vue2为例，Vue3可直接用ref定义对象）

export default {
  data() {
    return {
      // 新增这个对象存储每个密码字段的独立显隐状态
      passwordVisible: {},
      // 原有其他变量保留
      formFields: []
    }
  },
  methods: {
    getFormFields() {
      // 调用接口获取formFields的逻辑执行完成后
      this.formFields = 接口返回的表单配置数组
      // 初始化所有密码字段的显隐状态为隐藏，Vue2需要用$set保证响应式
      this.formFields.forEach(field => {
        if (field.type === 'password') {
          this.$set(this.passwordVisible, field.key, false)
        }
      })
    }
  }
}

2. Template部分密码框调整

把原有的密码框v-text-field替换为以下代码：

<v-text-field
  v-if="formField.type === 'password'"
  :id="formField.key"
  :key="formField.key"
  v-model="formField.value"
  :append-icon="passwordVisible[formField.key] ? '$vuetify.icons.values.eye' : '$vuetify.icons.values.eyeSlash'"
  :type="passwordVisible[formField.key] ? 'text' : 'password'"
  :hint="getHintText(formField)"
  :required="formField.required"
  :valid="(!formField.isValid) ? false : undefined"
  dense
  @input="inputHandler(formField)"
  @blur="inputHandler(formField, false)"
  @click:append="() => { passwordVisible[formField.key] = !passwordVisible[formField.key] }"
/>