vue.js - Vuelidate 重置特定字段，以便 $error 标志为 false-6ren

vue.js - Vuelidate 重置特定字段，以便 $error 标志为 false

转载作者：行者123 更新时间：2023-12-03 06:37:09

25

4

使用 Vuelidate，您可以使用 this.$v.$reset() 重置验证错误。 .在这个 Codepen example重置 lastName使用 Vuetify 组件的字段有效 - $invalid为真，而 $error设置为假。

重置 firstName 的常规文本输入时它不能作为 $error flag 仍然为真。如何修改文本输入，以便在调用重置时 $error 为假？

我也试过this.$nextTick(() => {...})但这也不起作用。

Vue.use(window.vuelidate.default)
var validationMixin = window.vuelidate.validationMixin
const {
  maxLength,
  required
} = window.validators

new Vue({
  el: '#app',
  mixins: [validationMixin],
  data: () => ({
    form: {
      firstName: '',
      lastName: ''
    }
  }),
  validations: {
    form: {
      firstName: {
        required, maxLength: maxLength(2)
      },
      lastName: {
        required, maxLength: maxLength(2)
      },
    }
  }
})

input.raw {
  border: solid;
}

.is-invalid {
  border-color: #FF5252 !important;
}

<html>
  <head>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/validators.min.js"></script>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/vuelidate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  </head>
  <body>
    <div id="app">
            <label for="firstName">First Name</label>
            <input
              v-model="form.firstName"
              id="firstName"
              class="raw"
              :class="{ 'is-invalid': $v.form.firstName.$error }"
              type="text"
              width="100%"
              :oninput="$v.form.firstName.$touch()"
              :onblur="$v.form.firstName.$touch()"
            />
            <button @click="$v.form.firstName.$touch()">
              $touch
            </button>
            <button @click="$v.form.firstName.$reset()">
              $reset
            </button>
            <pre>{{ $v.form.firstName }}</pre>
    </div>
  </body>
</html>

最佳答案

在您的示例中，您使用的是 oninput和 onblur HTML 属性，但在 Vue 中，您应该使用 @input ( v-on:input ) 和 @blur ( v-on:blur ) 绑定(bind)。见 docs详情。
用 Vue 绑定(bind)替换 HTML 属性使您的示例正常工作:

Vue.use(window.vuelidate.default)
var validationMixin = window.vuelidate.validationMixin
const {
  maxLength,
  required
} = window.validators

new Vue({
  el: '#app',
  mixins: [validationMixin],
  data: () => ({
    form: {
      firstName: '',
      lastName: ''
    }
  }),
  validations: {
    form: {
      firstName: {
        required, maxLength: maxLength(2)
      },
      lastName: {
        required, maxLength: maxLength(2)
      },
    }
  }
})

input.raw {
  border: solid;
}

.is-invalid {
  border-color: #FF5252 !important;
}

<html>
  <head>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/validators.min.js"></script>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/vuelidate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  </head>
  <body>
    <div id="app">
            <label for="firstName">First Name</label>
            <input
              v-model="form.firstName"
              id="firstName"
              class="raw"
              :class="{ 'is-invalid': $v.form.firstName.$error }"
              type="text"
              width="100%"
              @input="$v.form.firstName.$touch()"
              @blur="$v.form.firstName.$touch()"
            />
            <button @click="$v.form.firstName.$touch()">
              $touch
            </button>
            <button @click="$v.form.firstName.$reset()">
              $reset
            </button>
            <pre>{{ $v.form.firstName }}</pre>
    </div>
  </body>
</html>

关于vue.js - Vuelidate 重置特定字段，以便 $error 标志为 false，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59986139/

25

4

0

文章推荐： symstore - 维护夜间构建和发布构建的符号存储的策略

文章推荐： javascript - Vuetify v-simple-table 突出显示选定行

文章推荐： node.js - Redis，每次都建立新连接vs保持开放连接

Mdx - 标志 - 实际
我有两个维度 DimFlag 和 DimPNL 以及一个事实表 FactAmount 。我正在寻找:当 pnl 是 stat(Is Stat=1) 时:sum (Actual x FlagId)对于
JAAS LoginModule 标志
我试图弄清楚登录模块标志在 JAAS 中是如何工作的(使用 JBoss 5.1 EAP)，我遇到了一个令人费解的情况，我希望有人能为我澄清一下。对于背景，我的 login-config.xml 如下
c# - 为什么没有搜索引擎可以搜索到~标志？
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 9 年前。 Improve this
Javadoc 无法识别文档标题选项/标志
我正在通过 gradle 使用 doclet 运行 javadoc，当我运行 javadoc/doclet 任务时，我收到下一个错误: error - invalid flag: -doctitle
mysql - Sqoop导入 “--where”标志
我尝试使用sqoop --where标志将特定的行从MySQL表导入到HDFS，但是结果不符合预期。命令: sqoop import \ --connect "jdbc:mysql://XXXX
javascript - 在语言面板中切换图像(标志)
我有一个语言面板，其中有一个图像 (main-image)，显示页面加载时的情况。我还有三个额外的图像，它们在页面加载时隐藏。问题是当点击附加图像之一时如何切换主图像。我需要使用单击的 image
javascript - ContentEditable 标志？
奇怪...在 StackOverflow 上有很多关于此 attr 的问题，但没有人回答我的以下问题: 我有一个span(仅作为示例)，其中启用了ContentEditable。我只想保存更改的元素(
javascript - 如何在饼图中鼠标悬停时显示 "%"标志
我正在使用 ChartJS 2.0 在 UI 上绘制图表。而且我能够呈现饼图。但我希望鼠标悬停时显示数据以及“%”符号。我如何追加 % 因此，如果在鼠标悬停时我得到 Rented: 93 我想看到 R
Java HttpOnly 标志
我使用的是 Servlet 3.0，我想用 HttpOnly 标志保护我的 cookie。我的 web.xml 是 true
Android onStartCommand 标志
我有一个简单的服务: public class TestService extends Service { final String LOG_TAG = "myLogs"; public void o
bash - 转义 "#"标志
我正在尝试将 wget 与包含“#”符号的 url 一起使用。无论我做什么来逃避这个角色，它都不起作用。我用过\、' 和 "。但它们都不起作用。有人有什么建议吗？谢谢! 最佳答案如果您真的想让它有
mysql 命令行转义 - 标志
我正在尝试创建一个数据库，但我不知道如何转义数据库名称中的 - 符号。 mysql> create database happy-face; 给我一个错误 mysql> create databa
java - 我程序上的额外 + 标志
我为我的计算机科学类(class)编写了一个程序，它读取一个文件并导入数据，然后只添加数字，但它似乎添加了一个额外的加号。 import java.io.*; //necessary for File
html - 如何在与某些文本相同的行中获取图片(标志)？
可能是个愚蠢的问题，但我怎样才能在与某些文本看到图像相同的行中获取图像(在本例中为标志)？到目前为止我的 HTML 代码: FRA 最佳答案试试这个: img { height:20px
克隆和 CLONE_CHILD_CLEARTID 标志
我需要一些有关 clone() 系统调用的帮助。我试图将它与标志 CLONE_CHILD_CLEARTID 一起使用，但我看不到我指定为参数的字段值有任何变化。这是一个简单的代码: int the_c
转储中的 MySQL 标志
查看 mySQL 转储时，我遇到了一些东西，想知道它们是什么。我明白了: /*!50001 DROP TABLE IF EXISTS `xxx` */; flag 50001是什么意思，有什么意思的
禁止原始类型的 Javac 标志？
是否可以传递任何 Java 编译器标志来告诉编译器不允许使用原始类型？也就是说，对于任何泛型类，让编译器强制使用参数化版本，否则抛出编译错误？最佳答案 JDK7 (b38) 介绍 -Xlint:ra
c# - 如何获得枚举的所有可能组合(标志)
[Flags] public enum MyEnum { None = 0, Setting1 = (1 GetAllEnums() where T : struct
Android - PackageManager 标志
我正在浏览 PackageManager API。我发现定义了以下常量: 1) GET_DISABLED_COMPONENTS 2) GET_DISABLED_UNTIL_USED_COMPONENT
不能用宏包装 cgo 标志
我编写了一个 Go 程序来模拟按键操作。为此，我必须使用 cgo 和不同的 C 代码片段，具体取决于正在编译 Go 代码的操作系统。我编写的代码如下所示: package keyboard /* #i

首页

博学

6Ren·AI

商城

vue.js - Vuelidate 重置特定字段，以便 $error 标志为 false