layui的form中的非手动输入input用v-model获取不到数据是什么情况，要怎么做

最新推荐文章于 2023-02-01 15:44:49 发布
最新推荐文章于 2023-02-01 15:44:49 发布
阅读量573 收藏
点赞数 1
分类专栏： layui+vue js的坑 文章标签： java js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46209352/article/details/106961661
版权

在这里插入图片描述
这是提交后控制台打印的。
在这里插入图片描述
代码区
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
只要把form标签删了就能获取到数据，就是样式会乱。

weixin_46209352
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
[Vue] 解决 v-model 在 layui-form 中双向绑定失效的问题
weixin_42902669的博客
03-06 2125
今天在使用 layui-form 时遇到一个坑, 就是使用 v-model 无法与 layui-form 中的下拉框内容实现双向绑定, 出现这个问题的原因不太清楚, 应该是两个框架之间在某些地方产生的冲突, 下面利用两个框架各自的特性来变相地实现双向绑定. 1. layui-form 向 Vue 绑定 想要实现的效果是当 layui-form 下拉框中的内容变动时, Vue 中与之绑定的变量同步变动, layui-form 的代码如下 <form class="layui-form" action="
解决layui弹框失效的问题
01-19
之前一直用layer弹框组件一直出现这个 layer.js:2 Uncaught TypeError: i is not a function at Object.o.run (layer.js:2) at layer.js:2 at layer.js:2 at layer.js:2问题 后来发现header头部引入js和css文件调换一下就好了，之间文件样式是这样的 [removed][removed] [removed]<
解决Vue中表单输入框v-model双向绑定后数据不显示的问题
jattxgt的博客
11-22 4474
解决Vue中表单输入框v-model双向绑定后数据不显示的问题
v-model获取不到输入的值
源码好优多
04-05 6395
问题 表单input里面有显示值，但是data里面获取不到input里面的值。 原来是v-model后面多了个空格 解决 把空格删除就行了
layui中的form表单非手动输入input双向绑定v-model无法获取到值的坑，可以这么解决
weixin_46209352的博客
06-26 1741
今天遇到的layui跟vue结合中遇到了form中非手动输入input无法获取到值，想了半天不知道什么情况，于是用这种方法解决。 直接给标签加个id，axios中获取value值后在赋值传到后端，这样又简单又不乱样式，作为初学者也只能相到这简陋的方法了。 还有就是layui中form的button有默认跳转功能，可以通过return false，解决。 ...
记一个vue集成layui下拉菜单失效问题
蛐蛐的博客
10-19 799
1.简介 vue集成layui，下拉菜单写在组件里，发现没有下拉效果 2.解决 vue使用js渲染dom，layui在加载模块时通过第一次调用模块的render()、init()方法来进行初始渲染，所以当首先加载layui.all.js，后加载vue的app.js时，会出现vue渲染的dom没有被处理的情况，需要在mounted方法里手动渲染 mounted(){ layui.element.render(); } 此页面出现了几个模块就要渲染几...
Vue循环中多个input绑定指定v-model实例
10-14
在Vue.js中，`v-model`是一个非常强大的特性，它实现了视图与数据的双向绑定，使得我们在处理用户输入时能轻松地获取和更新数据。当涉及到在循环中使用`v-model`时，通常是为了创建多个类似的表单元素，如在列表或...
填坑记录之Vue中v-model与:model区别
01-20
初做vue项目中遇到这个问题，记录一下。...所以在form表单标签中，并没有向子组件传递数据，所以在input标签中获取不到数据。 正确的做法应该将form标签中v-model改为 :model，这样在子组件中才可以获
vue v-model动态生成详解
08-27
Vue V-Model动态生成是 Vue 框架中一种常用的数据绑定方式，但是在某些场景下，使用 V-Model 动态生成时会遇到一些问题，例如在输入框中动态绑定字段名，使用传统的方法 value 动态绑定，并且用子组件绑定向父组件...
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
01-21
Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。  例如下面的例子： <input type=text v-model=message placeholder=请输入...>...
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）
11-21
一、问题 用elementUi横着增加一行数据没毛病，可以操作 添加一列，这新增的这一列， 第一次去赋值的时候值是改了， 但没生效 ... 二、原因 横向添加 是复制上面的...v-model绑定数据不实时更新 三、解决 使用 vm.$set
JSP页面layui弹出层失效问题
zovz的博客
07-30 2277
前两天写了一个个人网站，使用了layui的各种组件，但是其中有很多的坑需要和大家说一下。 1.导入的问题 首先layui的导入，必须jqery在前，layui.js在后，自己编写的js文件应该在最后，否则会导致弹出层失效的问题. 建议将自己编写的js文件myStyle.js放入整个页面的最下方，也就是body的上面，因为有时候自己写的js文件需要获取页面的元素来监听，可能导致事件已经启动，但页面未加载完，元素为空的情况，导致js效果等不出现的问题。 jQuery>layui.js>commo
【解决】LayUI表单验证，提交按钮在弹出层，lay-verify失效的情况
苗老八的博客
05-25 2288
layui的表单是我特别常用的一个功能，这次在写添加和修改界面时，也顺手将layui的表单界面放进去，想着等会利用layui自带的表单验证功能将用户输入的值进行一一验证，没想到遇到了如题目所描述的情况。 在这里我并没有用到他自带的“立即提交”的submit按钮，而是弹出层的“确定”按钮，放代码： //“新增信息”按钮点击事件 add.addEventListener("click", function () { layer.open({ type: 1,
vue中v-model的无法获取两个值的一种解决方案
weixin_43674509的博客
05-30 7047
有一个需求要获取select下拉框中选中option的id与text文本 form表单我们会用到v-model去绑定属性来获取所需要的某一个值,在这里需要抢的的是这个绑定是一个值… 可是真实开发中,我们有需求会需要两个值…这就在探寻一种高效的解决方案. 可是不才.最终在淘汰了拿到一个值去遍历取得对应值的方案后,也只找到了如下方法,直接上代码: <template> ...
vue文本输入框v-model双向绑定手动赋值后文本框中数据不实时显示的问题
weixin_45616483的博客
02-01 2495
vue文本框双向绑定，手工赋值不实时显示的解决方法
avue属性及使用详细介绍
Devil678的博客
11-15 3134
<template> <!-- 基础组件 --> <basic-container> <!-- <el-button @click='exportHandle'>导出</el-button> --> <avue-crud 设置表格属性 :option="option" 用来存取页面的值 v-model="form" 获取后台数据 :
avue-form表单常用属性和用法
热门推荐
一个憨憨的前端之路
07-30 1万+
个人用法：在vue中可以单独建立一个option.js文件，放置默认的统一参数，在使用的vue组件中引入该文件，设置组件内特殊的参数。 全面参数请参考 avue官方文档 option.js文件 // 默认表单选项 export function formOption (config) { const option = { card: false, size: 'mini', labelWidth: '100', //弹出表单的标题的统一宽度 labelPosition:
avue 监听form某一字段值来进行动态显隐
朝花夕拾的博客
07-02 8688
废话不多说直接上代码 <avue-form :option="option" ref="form" v-model="form"></avue-form> <script> export default { data(){ return { form:{ text1:0, }, option:{ column: [{ label: '内容1',
怎样给el-form-item中嵌套的el-input中v-model绑定的其他变量实现表单验证
最新发布
05-05
你可以通过自定义验证规则来实现给el-input绑定的v-model绑定的其他变量实现表单验证。具体步骤如下： 1. 在el-form中设置 :model属性，绑定一个对象作为表单的数据模型。 2. 在el-form-item中嵌套el-input，并给el-input绑定v-model，将其绑定到表单数据模型中对应的属性上。 3. 在el-form-item中设置 :rules属性，绑定一个数组，用于定义验证规则。 4. 在数组中定义一个自定义验证规则，该规则接收两个参数：value和callback。value表示el-input绑定的v-model的值，callback是验证完成后的回调函数，需要在这个函数中传递一个布尔值，表示是否验证通过。 示例代码如下： ```html <el-form :model="formData" ref="form" :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="formData.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> ``` ```javascript data() { return { formData: { name: '', age: '' }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' }, { validator: this.validateName, trigger: 'blur' } // 自定义规则 ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { validator: this.validateAge, trigger: 'blur' } // 自定义规则 ] } }; }, methods: { validateName(rule, value, callback) { // 验证规则 if (value && value.length >= 2 && value.length <= 5) { callback(); } else { callback(new Error('姓名长度应该在2-5个字符之间')); } }, validateAge(rule, value, callback) { // 验证规则 if (value && value >= 18 && value <= 60) { callback(); } else { callback(new Error('年龄应该在18-60之间')); } }, submitForm() { // 提交表单 this.$refs.form.validate(valid => { if (valid) { // 表单验证通过 // TODO: 提交表单数据到后端 } else { // 表单验证失败 return false; } }); } } ``` 在这个示例中，我们给el-input绑定的v-model绑定到了formData对象的name和age属性上，并且通过自定义的验证规则来验证输入的内容。在表单提交时，我们调用validate方法来验证整个表单的数据模型，如果验证通过，就可以将formData对象提交到后端进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值