Vee-Validate

Question

我在我的项目中使用 vee-validate，（更新密码页面）

我想显示 hide/show 切换器图标 仅当输入字段已填满时，有没有不使用 ref 的方法？

我的代码：

<div">
    <Field
        name="old_password"
        :type="showPassword ? 'text' : 'password'"
        id="old_password"
        rules="required"
    />
    <v-icon
        @click="showPassword = !showPassword"
        class="pointer toggler-icon2"
        name="hideShowToggler"
    />
</div>
<div class="error-div">
    <ErrorMessage name="old_password" v-slot="{ message }">
        <p class="error">{{ message }}</p>
    </ErrorMessage>
</div>

提前致谢

Answer 1

您可以在 Field 标签中添加 v-model，在 v-icon 中添加 v-if：

    <div>
        <Field
            name="old_password"
            :type="showPassword ? 'text' : 'password'"
            id="old_password"
            :rules="required"
            v-model="passwd"
        />
        <v-icon
            @click="showPassword = !showPassword"
            class="pointer toggler-icon2"
            name="hideShowToggler"
            v-if="passwd"
        />
    </div>

您的数据函数中还需要 return 密码：

      data() {
        return {
          passwd: "",
        }
      }

如果没有参考文献或数据，我不知道该怎么做 return :(

编辑：您可以添加 v-on 指令，在密码字段上的任何按键上触发功能：

    <div>
        <Field
            name="old_password"
            :type="showPassword ? 'text' : 'password'"
            id="old_password"
            :rules="required"
            v-on:keyup="passwdChecker"
        />
        <v-icon
            @click="showPassword = !showPassword"
            class="pointer toggler-icon2"
            name="hideShowToggler"
            v-if="passwd"
        />
    </div>

但你仍然需要 v-if 和一个 passwd 变量，但这次它是一个布尔变量:

  data() {
    return {
      passwd: false,
    };
  },
  methods: {
    passwdValue() {
      if ($("#old_password").val()) this.passwd = true;
      else return (this.passwd = false);
    }
  },

当然不用jQuery。希望能帮到你。

Vee-Validate - 检查输入是否已填写

Vee-Validate - check if input is filled

vue.js