vue新增数据时 打印表单内容为空问题

最新推荐文章于 2024-04-01 18:34:30 发布
最新推荐文章于 2024-04-01 18:34:30 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： vue+element-ui 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luxurie/article/details/104848613
版权

vue+element-ui打印表单数据为空问题

在做后台管理系统时，我们常常有新增用户或商品类似数据的功能。
因为用了element-ui组件库，所以新增表单在对话框中完成。

今天突发奇想在向后端发起请求前先在控制台console.log一下新增的表单对象，结果发现为空。

可是明明这些数据已经赋值了，下面单独打印表单中任意一条数据，发现也不为空。

最后查阅资料，原来谷歌浏览器打印的对象是实时最新的对象，在控制台点开查看数据时对话框已经关闭，此时表单已重置为初始值，所以看到的自然就是空啦~

Nuygnix~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue数据驱动表单渲染,轻松搞定form表单|angluo-javascript-266203.pdf
10-16
开发者可以将每个表单元素（如input、select、button等）都视为独立的Vue组件，这些组件需要能够响应数据变化而自动更新。例如，使用v-model指令将表单元素的值与Vue实例的数据对象属性双向绑定，实现数据的动态更新...
vue3.2 响应式之 ref 、reactive 、toRef 、 toRefs
呵呵，到处看看
11-23 1423
【代码】vue3.2 响应式之 ref 、reactive 、toRef 、 toRefs。
vue3Watch监听RefImpl对象的说明
moxunjinmu的博客
03-07 5748
vue3Watch监听RefImpl对象的说明watch监听RefImpl对象 watch监听RefImpl对象 <script> import { ref, reactive, watch } from "vue"; export default { name: "Demo", setup() { // 数据 let sum = ref(0); let msg = ref("你好啊"); let person = ref({ name: "张
vue3中ref 和 reactive的简单了解
Kobeloveu
01-06 1134
<script lang="ts" setup> import { ref, reactive } from "vue"; const num = ref(0); const obj1 = ref({ value: 1 }); const num2 = reactive(0) // 直接提示错误，建议Object 类型 const obj2 = reactive({ value: 1 }); console.log("num :>> ", num); // RefImpl{_sha
js 控制台打印对象，对象点开后里面属性没值，展开后有值（object展开和收起值不一致）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
10-08 5764
js 打印这个对象的语句执行的时候, 对象里面的确是有值的,但是当程序继续执行,下面的代码有对这个对象赋值的语句,所以chrome控制台显示,里面有值。 打印时内存里的值已经变了 ，导致 展开和收起不一致。 因为 js对象赋值 只是引用地址赋值过去了，还是指向同一个 地址。 所以 js想要拷贝一个 object需要 深拷贝 最简单的就是 json.stringfly方法 示例： let obj={ name:"555", age:"15" }; console.log(ob
RefImpl 对象 .value时数据为空，直接输出则显示数据（vue3前端异步问题 ）
最新发布
larea的博客
04-01 1292
因为console.log打印对象的执行机制，当你在浏览器控制台点击对象，展开对象时，此时浏览器才会去对象所在的堆内存中获取数据,再经过浏览器编译，展示在控制台。控制台对象一旦打开后，就不再修改，其值就会存储在浏览器中，即使后面代码再次更新对象，也不会改变了。通过watch就可以打印出来了。通过.value打印出来是空。
vue实现重置表单信息为空的方法
12-12
背景 之前表单重置为空的话是这样写的 this.fromline = { access_provider_name: '...以上这篇vue实现重置表单信息为空的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Vue 一键清空表单的实现方法
10-15
在Vue中实现表单清空的方法有多种，但核心思路是相同的，即通过操作数据来控制表单显示的内容。关键在于要确保数据的深拷贝，避免因为浅拷贝导致数据不一致的问题。 首先，需要在合适的生命周期钩子（如`created`）...
vue-form表单验证是否为空值的实例详解
10-16
这些数据被双向绑定到表单元素，当用户输入时，数据会自动更新。 接着，我们关注 `methods` 对象中的 `submit` 方法。这个方法是表单验证的核心。当用户点击“注册”按钮，`submit` 方法会被调用。首先，我们检查 `...
vue3使用ref获取dom结果为‘null’
m0_56683897的博客
03-22 7511
这就是生命周期的问题了，setup本质上相当于vue2中的created，在创建阶段，dom元素还未完全创建完成，此时获取dom自然为null了。如果你使用了setup语法糖，那么你在使用时可能会出现ref.value取不到子组件里的值，或者报错ref.value对象为空的情况，那是因为在语法糖中获取到的是一个proxy值。setup的return中应该抛出ref封装的字段，否则ref的值只是定义了并不能响应式使用，事实上，所有ref或者reactive定义的值都应在return中抛出。
vue3 - ref函数处理基本类型
树上骑个猴的博客
09-12 7024
需求：点击按钮更新页面数据 如果这么写，数据会更新，但是页面不会更新： 如果想让页面显示与数据同步，也就是响应式更新，要用ref， ref包裹后是个对象，是refImpl的实例对象
Vue——vue3中的ref和reactive数据理解以及父子组件之间props传递的数据
测试
09-04 5534
props数据，ref和reactive和ObjectRefImpl和proxy
【vue3学习笔记】（P153节 - P155节）watch时value的问题；watchEffect函数；vue3生命周期
youyoufenglai的博客
01-29 553
如果不写 .value，此时监视的是一个RefImpl的实例对象，这个对象的任一属性改变时，才会监视到。如果只是修改该对象里面的属性值，则value对应的对象在内存中的地址并没有发生变化，所以vue不认为value变化了，故而监视不到；通过下图对比可以看出一点明显的变化，即vue2中在vue实例挂载到el上之前，就执行了 beforeCreate 和 created 两个钩子，执行完这两个钩子才去判断有没有配置el，有则继续向下走，没有则停止了；但实际开发中不会这样混用。vue3的这一点调整更加合理了。
Vue3-自学笔记
m0_62475892的博客
04-16 841
Vue3自学笔记
vue项目中。数组对象有值打印整个数组可以看到各个元素的值。但是打印某个下标里面的内容就没有值
肖肖肖丽珠的博客
04-02 9264
for(var i = 0;i < this.activities1.length;i++){ console.log(this.activities1[i]); if(this.activities1[i].icon == 'el-icon-check'){ console.log("mmm") } ...
父组件传对象给子组件，子组件打印不出这个对象携带的属性值
weixin_43743148的博客
04-07 1213
父组件传对象给子组件，子组件打印不出这个对象携带的属性值
vue3响应式ref console.log输出.value时数据为空直接输出则显示数据 前端异步问题
qq_52790429的博客
10-11 1481
后面研究了一下应该和异步有关系，从这个字典获取到的数据是异步的，拿不到里面的数据！但是我搞不懂为啥打印的时候不带.value就可以打印出来。当我想对获取到的数据字典进行一些操作的时候发现我在setup语法糖里面没办法对这个数据进行相关的操作。后面用watch监听这个数据就可以打印出来。
vue新增时表单里有数据
05-01
如果在vue中添加一个表单并填充了数据，可以使用v-model来绑定表单数据，然后在提交表单之前保存数据。例如： 1. 在组件中声明一个数据对象，包含要绑定表单的数据： data() { return { formData: { name: '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值