element UI表单验证不是使用v-model绑定值而是使用js赋值，验证遇到的问题

最新推荐文章于 2023-08-04 21:30:57 发布
最新推荐文章于 2023-08-04 21:30:57 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zongmaomx/article/details/108828754
版权

如图新增视频是上传后将返回的url赋值给对应的字段，但明明已经赋值了，表单验证还是不通过。

最后发现是对应的字段没在data中定义，用v-model绑定的则不需要定义

zongmaomx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中不使用v-model进行父子组件双向数据绑定
Elltor
01-14 971
v-model数据绑定原理：v-model封装了v-bind和v-on两个指令，当值改变时首先通过v-on触发事件并改变组件的值，然后使用v-bind将输入框的值保存起来。在高版本的vue【测试为2.6+】中，不需要使用v-bind属性来保存值。 样例说明： 父组件data中的num1、num2绑定给了子组件，在子组件的输入框中改变子组件值，同时会利用输入框的input事件改变子组件da...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
总结起来，使用Element-UI和Vue.js解决表格内表单验证问题，需要理解`el-form`和`el-form-item`的绑定机制，以及如何动态生成`prop`属性。通过正确地配置数据模型和验证规则，可以轻松实现复杂表单的验证，提高用户...
element-ui:非v-model绑定的自身属性的form表单验证
webfullstack的博客
10-17 7074
场景还原:在el-form-item上绑定的验证并不是el-form-item里面的v-model,而是经过换算的值 code: <el-form :model="dialogFeedback" :rules="dialogFeedback_rules" ref="dialogFeedback" :label-position="labelPositionRight" label-widt...
vue + elementUI form表单JS赋值无法输入的问题
u010376229的博客
10-12 1095
当用JS给表单数据直接赋值后，表单无法输入的问题 层次深了之后会检测不到变化 解决方法： 1、可以初始化一份表单的各个字段 2、动态添加字段 如 this.$set(this.formData, key, value)
验证：不使用v-model指令，双向绑定能否实现
weixin_43297321的博客
07-16 1053
vue 是 基于 MVVM 框架的，MVVM实现了双向绑定，但 vue 还有个指令v-model也能事项双向绑定。那么，问题来了，在不使用v-model指令的情况下，MVVM能实现双向绑定更新数据吗？ 答案：能。 举个例子：简单的一个输入框，输入数据，回车，添加任务。 使用v-model，输入框里的数据实时改变，插入到任务数组中的数据也进行改变； 但我现在不关心单个数据的变化，我想看下，如果不使用v-model，任务数组改变后，能不能显示在页面上。 <!-- 验证内容：不使用指令v-model，查看是
elementUI中el-form的v-model和:model踩坑
ju__ju的博客
03-12 4809
日常踩坑,记录一下 手贱自己写了一下el-form.将:model写成v-model了,然后表单验证的时候(如下图), 一直打印undefined,真是吐了啊,以后一定粘贴复制,再也不手写了,一掉坑要找半天 .警醒自己
【JavaScript源代码】总结Vue Element UI使用中遇到的问题.docx
12-29
DateTimePicker在类型为`daterange`时，其`v-model`绑定的值是一个包含两个日期的数组。如果你需要分别处理这两个日期，可以在`data`中定义两个单独的变量，然后通过`watch`监听`dateRange`的变化，将其拆分并赋值...
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
12-11
综上所述，Vue.js结合Element UI实现的这个示例展示了如何利用组件化的方式构建一个可编辑的表格，包括数据绑定、事件处理、表单编辑和验证、数据同步以及UI交互，这些都是前端开发中的常见场景和重要技能。...
解决element ui select下拉框不回显数据问题的解决
10-17
当使用`el-select`组件绑定数据模型（`v-model`）时，下拉框在编辑表单时无法显示已选择的选项。开发者可能发现，虽然数据已经正确地从服务器获取，但在界面上并未正确地回显到下拉框中。这通常是由于数据类型不匹配...
Vue动态生成el-checkbox点击无法赋值的解决方法
12-03
在Vue.js开发中，我们经常会遇到动态生成组件的需求，特别是在构建表单时。Element UI是一个常用的前端组件库，它的`el-checkbox`组件用于创建复选框。然而，当我们尝试使用v-model动态绑定数据时，可能会遇到一些...
vue- form动态表单验证规则-表单验证
最新发布
路虽远行则将至，事虽难做则必成。
08-04 1604
以element官网的form表单的-动态增减表单项为例讲解表单验证规则动态的功能就是v-model配合push + v-for 便利来实现的我们需要熟知2个知识点prop表单验证需要跟v-model绑定的值是一样的，如果是一个数组便利的表单，那就需要绑定这个数组每一项v-model值。
el-form组件不绑定mode时进行校验
qq_45599738的博客
07-27 521
el-form组件不绑定mode时进行校验控制
基于Element-plus封装配置化表单组件（组件的v-model实现）
zep
03-25 2972
一、预备知识 1.1 组件的v-model 前面我们在input中可以使用v-model来完成双向绑定： 这个时候往往会非常方便，因为v-model默认帮助我们完成了两件事； v-bind:value的数据绑定 和 @input的事件监听； 如果我们现在封装了一个组件，其他地方在使用这个组件时，是否也可以使用v-model来同时完成这两个功能呢？ 也是可以的，vue也支持在组件上使用v-model； 当我们在组件上使用的时候，等价于如下的操作： 我们会发现和input元素不同的只是属性的名称和
el-form表单验证的一些方法总结
AC_Surprise的博客
01-23 6908
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 知识点 根据文档说明，model为表单的数据对象，el-form通过model绑定数据。 reles为表单验证规则对象，其中字段名要与model中的字段名一一对应 el-form-item 容器，通过 label 绑定标签，prop属性设置为需要验证的字段名 表单组件通过 v-model 绑定 model 中的数据 表单校验相关属性 hide-re
通过js给el-input value赋值，v-model绑定值不同步问题
weixin_43861311的博客
10-26 6955
1.在页面上通过点击右侧，直接给input赋值，由于input不是固定是可新增的，结构是循环出来的，没想到其他好的方式可以确认是修改的哪个参数，因此直接js操作 2,通过blur事件获取到event template： <el-input v-model="item.value" size="mini" @blur="handleInputBlur" ></el-inp.
2021.10.27 element的表单使用自定义组件时，校验监测不到value改变
一只白猫罢了
10-27 1572
遇到个bug： 表单上传文件后，明明已经有内容了，字段提示校验还存在。 rule = [{ required: true, message: `请上传${item.title}`, trigger: 'change' }] 解决过程： 以为是校验方法有问题，自己写了个针对附件上传的校验： const validatePass = (rule, value, callback) => { if (value.length) { return callback(); } else
element-ui的form表单验证如何如何解决v-mode赋值与prop赋值问题
IT侠客行的博客
02-28 768
element-ui的form表单验证如何给动态的prop
vue引入elementui不起作用,vue4.5.4项目引入elementui
纸尿裤排行
09-11 385
安装以下模块，让webpack可以解析css文件cnpminstallstyle-loader--save-devcnpminstallcss-loader--save-devcnpminstallfile-loader--save-dev1231232.安装elementUi模块cnpminstallelement-ui@next-S113.在中添加配置test:/\\\\\\\\.css$/,loader:"style!是cdn引用的不对吗?
element UI动态绑定验证无法生效
weixin_46176363的博客
10-19 281
出现这个问题是因为vue的diff算法，在diff算法中会尽可能的复用组件，， 参考.
vue使用element-ui的表单男女选择
06-10
你可以使用element-ui中的ElRadio和ElFormItem组件来实现男女选择表单。以下是一个示例代码： ``` <template> <el-form :model="form" ref="form" label-width="100px"> <el-form-item label="性别"> <el-radio-group v-model="form.gender"> <el-radio label="male">男</el-radio> <el-radio label="female">女</el-radio> </el-radio-group> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { gender: '' // 默认为空 } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log(this.form) // 在这里可以将表单数据提交到后端 } else { console.log('表单验证失败!') return false } }) } } } </script> ``` 在上面的示例中，使用了ElRadio和ElFormItem组件来实现男女选择表单，v-model指令绑定了form对象中的gender属性，用来记录用户选择的值。当用户选择男或女时，gender属性就会被相应地赋值为'male'或'female'。表单提交时，可以将form对象提交到后端进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值