时间戳

首页 > 解决方案 > Vee-Validate - 检查输入是否已填写

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

问题描述

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

我只想在填充输入字段时显示隐藏/显示切换器图标，有没有办法在不使用 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>

提前致谢

标签： vue.jsvee-validate

解决方案

您可以将 v-model 添加到 Field 标记并将 v-if 添加到 v-icon：

    <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>

您还需要在数据函数中返回密码：

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

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

编辑：您可以添加 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。我希望我有所帮助。

推荐阅读