vue input有时显示undefined 求助大佬

最新推荐文章于 2024-06-12 11:49:57 发布
最新推荐文章于 2024-06-12 11:49:57 发布
阅读量3.4k 收藏 1
点赞数
文章标签： vue el-input undefined
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gyk1245646/article/details/90241336
版权
这篇博客探讨了在Vue应用中遇到el-input显示undefined的问题。作者通过展示相关代码，详细描述了一个包含el-input输入框的对话框组件，该组件在输入验证时可能出现undefined的情况。文章介绍了如何通过验证函数和数据绑定来确保输入值的有效性，并提供了添加、编辑和关闭对话框的逻辑。同时，还讨论了如何在关闭对话框时清理输入数据，以防止undefined的显示。
摘要由CSDN通过智能技术生成

1<template>

<div>

<el-dialog

title="添加"

:visible.sync="visible"

@close="closePpp"

width="50%"

append-to-body="true"

class="dialog_wap"

:close-on-click-modal="false"

>

<el-form :model="form" label-width="120px" ref="form" label-position="left">

<div style="margin-top:10px;margin-left:20px;font-size:14px;margin-right:20px;">

<el-form-item

prop="C_NAME"

label="软件名称"

:rules="[{ required: true, message: '请输入软件名字', trigger: 'blur' }, ]"

>

<el-input v-model="form.C

最低0.47元/天 解锁文章
gyk1245646
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 中this.$emit()的返回值是什么？
weixin_34383618的博客
04-06 4811
#vue中this.$emit();返回值是什么 vue中的三大属性:属性 、事件、插槽，---事件 在事件中有 普通事件：@click/@input/@change/@xxx...事件； 修饰符事件：@input.trim,@click.stop,@submit.prevent...一般用于原生html元素； 答：在vue中this.$emit(); 返回值是this; 代码示例： ...
this.$emit(‘input‘,val)的用法
weixin_44709363的博客
05-29 2047
父组件可通过v-model来接收子组件传递的参数，因为v-model的原理就是使用了@input事件实现双向数据绑定。同理，父组件v-model='val' 子组件通过props可接收父组件传递过来的val。
vue elment-ui render中input为undefined input-number也没有对应值
04-28 1431
this.tableData.col.forEach(item => { if (item.prop === 'count') { item.render = (h, params) => { let count = 9 return ( <div>{param...
Vue使用Element表单校验错误Cannot read property ‘validate’ of undefined
最新发布
qq_41691068的博客
06-12 155
Vue使用Element表单校验错误Cannot read property ‘validate’ of undefined 出现这种错误有时候并不是代码的问题！如果弹出下面这个对话框！安装到我们自己的项目里面。如果不弹出，直接安装后运行看效果。而是我们没有安装组件！
element-ui表单验证，value一直为undefined的一种可能解决方案
热门推荐
HermitSun的博客
04-18 1万+
有很多人遇到过这个问题，但是一般都是因为prop没写对，或者没有在data里声明；但我遇到的情况这两者都不是。代码如下： <template> <el-form :rules="rules"> <el-form-item prop="value"> <el-input v-model="form.value"/> &l...
踩坑 antd Form表单获取input默认值失败，Form表单校验input 必填 默认值为undefined
github_54195343的博客
05-09 4429
问题描述：1，跳转页面后，通过url传参，将参数自动回填到下一个页面的input输入框里，打开页面后，input成功显示回写内容。2，为FormItem添加必填校验required:true。3，提交表单，校验未通过，提示input未填写内容，手动输入则校验成功。 代码如下： 问题在于，rules进行校验的时候，拿到的input value是undefined，如果把rules的校验规则写成自定义的函数，打印value则能直观的看到值为：undefined。 思路：默认值是Input输入框的，除非
vue props传值失败 输出undefined的解决方法
10-18
今天小编就为大家分享一篇vue props传值失败 输出undefined的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue触发input选取文件点击事件操作
10-14
总的来说，Vue.js中的文件上传操作可以通过监听按钮点击事件触发input元素的文件选择对话框，然后通过`FileReader`处理选中的文件。同时，Vue的懒加载机制可以提高大型应用的性能，确保用户只加载他们需要的模块。
Vue实现input宽度随文字长度自适应操作
10-15
主要介绍了Vue实现input宽度随文字长度自适应操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.js input框之间赋值方法
10-18
在提供的示例中，有两个主要的方法`test1`和`test2`，它们分别对应不同的input框。这里的关键是`ref`和`v-model`指令。 1. `ref`指令用于在Vue实例中引用DOM元素或组件。在例子中，`<input type="text" value="调试...
vue 限制input只能输入正数的操作
10-15
主要介绍了vue 限制input只能输入正数的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用$emit子组件向父组件传值踩坑汇总
qq_40707354的博客
01-17 1405
问题1：子组件使用this.$emit('父组件事件名',参数)，父组件接收参数报undifined 原因：方法名有括号，子组件未识别
vue3里面子组件调用父组件的方法,子组件传值,父组件接收的时候是undefined
YZRHANYU的博客
03-11 2726
vue3里面子组件调用父组件的方法,子组件传值,父组件接收的时候是undefined
vue中父子组件传值出现undefined
shangsiqi1的博客
11-15 8557
当父子组件需要用到对方的值的时候是不能访问对方data中的数据或methods的 那么当父向子传值的时候就在父组件中引入的子组件的标签上绑定属性 再把值传递过去 在子组件中要先把属性放入props数组中,才能使用 而子向父传值就要父组件提供方法给子组件, (在父组件中找到子组件引入的标签,标签上@xxx=“父组件方法名”) 在子组件中调用父组件的方法并把值传给他 (子组件中直接调用this.$em...
elementUI 表单验证：获取到input中的值(value)，显示undefined
天天向上
01-02 9165
<el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="100px"> <el-form-item label="年龄" prop="infoList.age"> <el-input v-model="dataForm.infoList.age" type="text...
v-model绑定的数据为什么会报undefined
xiaoxiezZ的博客
09-27 5645
开发遇到一个神奇的bug，v-model绑定data里的数据，竟然报undefined，代码大概这样： <el-form ref="form" :model="formData"> <el-form-item label="姓名"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="手机号">
Vue 父子组件方法this.$emit()有时候不触发问题
qq_41580802的博客
10-26 7805
Vue 父子组件方法this.$emit()有时候不触发问题，亲测有效
vue .input赋值之后input框无法输入，或者和其他input框错位，校验延迟
weixin_42575505的博客
01-10 1951
如果在 Vue 中使用 v-model 指令给 input 框赋值之后，input 框无法输入或者和其他 input 框错位，有可能是因为 v-model 指令在给 input 框赋值之前导致了错误。 这种情况常常发生在在父组件和子组件之间传递数据时，由于数据在父组件和子组件之间的渲染延迟导致的。 要解决这个问题，可以使用 v-model.lazy 指令，或者在赋值时使用 $nextTick 方法...
vue el-input 显示信纸
08-29
要在Vue中使用el-input组件显示信纸，首先需要在Vue组件中引入el-input，并传入相关的属性和样式。具体步骤如下： 1. 在Vue组件的模板中使用el-input组件，如下所示： ``` <el-input v-model="message" type="textarea" :rows="5" placeholder="请输入您的信件内容" :autosize="{ minRows: 5, maxRows: 10 }" ></el-input> ``` 其中，v-model用于双向绑定数据，将输入的内容绑定到组件实例的message属性上。type设置为textarea以便多行输入。rows设置初始行数为5，placeholder设置输入框的提示文本。autosize属性用于自适应文本框的高度。 2. 在data中定义message属性： ``` data() { return { message: '' } } ``` 这样就创建了一个用于存储输入内容的变量message。 3. 可以通过CSS样式来调整el-input组件的外观，以实现显示信纸的效果。例如，可以使用边框、背景图或者阴影等样式来模拟信纸的外观。 ``` .el-input { border: 1px solid #ccc; background: url('paper.jpg'); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); } ``` 其中，.el-input是el-input组件的样式类名，border用于设置边框样式，background用于设置背景图像，box-shadow用于设置阴影效果。 通过以上步骤，就可以在Vue中使用el-input组件来显示信纸效果了。用户可以在输入框中输入内容，并且组件将内容绑定到message变量中，开发者可以通过message变量来获取输入的内容，实现相应的功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值