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

【问题标题】：Vee-Validate - check if input is filledVee-Validate - 检查输入是否已填写
【发布时间】：2021-09-30 09:10:49
【问题描述】：

我在我的项目中使用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>

提前致谢

【问题讨论】：

什么是Field？，使用v-if="passwordFieldValue"

标签： vue.js vee-validate

【解决方案1】：

您可以将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。我希望我能帮上忙。

【讨论】：