vue3中form对象无法赋值问题

已于 2024-01-19 16:39:59 修改
阅读量514 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript vue3
于 2024-01-19 10:27:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38109616/article/details/135691143
版权

在这里插入图片描述加上 async await还是不行在这里插入图片描述
有时候对象的值死活赋不上值，这时候可以看下赋值的对象变量名是否和页面组件中的ref相同，如果存在相同，则参照以下解决方案：

问题定位：setup 中抛出的变量不能与页面组件中的 ref 重复

解决方式：更换ref名称
在这里插入图片描述
ref=“form” 改为ref=“messageForm”

vivk2017
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue3中新增时form对象无法赋值问题
m0_38109616的博客
01-19 184
vue3form对象无法赋值
antd vue3 form 表单的赋值和取值问题
2301_77643651的博客
06-14 3652
当点击编辑的时候给form表单赋值，如下图。最后在记录一下table 渲染按钮。
el-form明明给表单对象属性进行了赋值，但为什么当提交表单时仍然校验失败呢？？？
最新发布
m0_52872381的博客
04-08 383
把相应的校验数据改为。
解决vue接口数据赋值给data没有反应的问题
10-18
今天小编就为大家分享一篇解决vue接口数据赋值给data没有反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3用reactive定义的对象直接赋值{}没用的解决办法
wzy_PROTEIN的博客
01-26 1539
前言：在项目开发时，有很多弹窗里面放的表单，如下图这个新增数据的弹窗，在每次打开弹窗时需要给表单定义的数据置空，否则你第二次打开弹窗的时候，表单还显示着上一个新增的数据。需要在打开弹窗是将上面那个对象置空，但是vue2一般直接={}就可以，vue3的话这样不行，所以需要用到object.assign
vue3中对象无法赋值问题
weixin_40968646的博客
02-08 1747
简介：查看变量是否和ref重名，修改重名变量即可。
vue3使用表单el-form的坑+el-input无法输入+el-date-picker选择时间不能赋值
wenhui的博客
09-14 3668
遇到一个大坑，弄了好几个小时才找到问题。 vue3使用el-form的时候，如下代码，会导致输入框无法输入，无法赋值，选择框无法选择 <el-form class="my-form" ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el.
vue3 修改数据（赋值赋不上）
shi19970609的博客
04-21 1146
赋值为空的时候不能成功 要使用data.splice(0, data.length)const rowSelection = reactive(）//定义。整体替换 Object.assign(变量, 换的值);如果里面是对象 修改某个值可以直接修改。
Vue动态生成el-checkbox点击无法赋值的解决方法
12-03
定义的 data 的 form 里面是空对象，需要动态生成里面的 key export default { data() { return { form: {} } }, } 从后端接口得到 checkList，这个就是动态生成的表单数据 v-for 循环 checkList，得到 key，...
vue-form-render:基于Vue 3.x，使用JSON模式快速生成自定义表单配置界面
05-06
例子安装npm i vue3-form-render --save vue3 form render依赖于从item.so进行渲染，因此在使用vue3 form render我们需要安装Ant Design of Vue并将其导入到我们的项目中： import { createApp } from 'vue'import ...
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
12-01
1、使用Vue.js实现双向表单数据绑定，例子 <!--html代码--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &lt...
ant-design-vue3.x的form表单爬坑.pdf
12-16
ant-design-vue3.x的form表单爬坑
解决ant Design中this.props.form.validateFields未执行的问题
01-18
在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行，也没有报错。 原因： 我使用了自定义校验 validator ，在自定义校验方法中有个错误，使用了...
vue3 ts页面赋值发现不生效
weixin_50216073的博客
07-19 344
vue3 ts 页面赋值不生效 ref和model 定义的名重了!
Vue form表单input框 手动赋值未生效
sunshineTing2的博客
02-28 4298
前言 在VUE项目开发过程中，遇到一个很奇怪的表单赋值问题，赋值为生效，而当遇到下拉框切换时，上一个值显示出来了。 定位问题 1、在data中只定一个formData对象，其中有20多个表单项未定义 2、当后端数据返回时，前端直接赋值，未生效，采用$forceupdate()解决了问题 3、但是又偶然遇到另一个问题，就是必须下拉框变化时才更新数据。 原因 原因：如果在实例创建之后添加新的属性到实例上（赋值），它不会触发视图更新。 由此Vue实例创建时，表单属性名并未声明，因此Vue就无法对属性执行 gett
vue elementUI el-form 数据无法赋值且不报错解决方法
xuelong的博客
12-25 1095
vue项目中使用elementUI的el-form组件，里面有部分后端数据遍历的字段和部分确定的字段。
【vue 】表单 赋值报错 You cannot set a form field before rendering a field associated with the value
ws1711073183的博客
08-13 324
由上一页传过来的表单值，赋值到表单上，第一次表单总是显示空白，实际上值已经传过来了，关闭窗口，再重新打开，就又显示出来了。然后第一次就报错，再打开就不报错了、 表单用的都是 v-decorator="[ record.key, { initialValue:record.options.defaultValue, rules:record.rules } ]" 这种绑定的，然后赋值用的...
vue2 和 vue3 antd 使用Form表单修改编辑时循环对象，使用对象属性的唯一性赋值，antd表单赋值时：赋多赋少都会报错喔
agua001的博客
04-25 2201
vue2 和 vue3 antd 使用Form表单修改编辑时循环对象，使用对象属性的唯一性赋值，antd表单赋值时：赋多赋少都会报错喔
vue 给form表单赋值_Ant Design Vue给a - form表单赋值及获取表单数据 - 期权论坛
weixin_28729331的博客
01-30 5595
这里先说一下v-decorator指令：v-decorator下面是form表单内的文本输入框，使用了v-decorate进行数据绑定：这个是v-decorate的用法，类似于v-model，但是v-decorator可以更方便的添加校验，必填项等；v-model可以更方便地获取值以及设置值，这个是二者在开发时最明显的区别(其他的我暂时没发现)。这里是主要讲v-decorator，因为表单内使用这...
vue3 form表单对象赋值
12-22
在Vue.js中，可以使用v-model指令实现双向数据绑定，将表单元素的值与Vue实例中的数据属性进行关联。通过给v-model指令绑定一个数据属性，可以实现表单元素的值与该数据属性的双向绑定。 下面是一个示例，演示了如何在Vue.js 3中实现表单对象的赋值： ```html <template> <form> <label for="name">Name:</label> <input type="text" id="name" v-model="formData.name"> <label for="email">Email:</label> <input type="email" id="email" v-model="formData.email"> <button @click="submitForm">Submit</button> </form> </template> <script> import { ref } from 'vue'; export default { setup() { const formData = ref({ name: '', email: '' }); const submitForm = () => { // 在这里可以访问表单对象的值 console.log(formData.value.name); console.log(formData.value.email); }; return { formData, submitForm }; } }; </script> ``` 在上面的示例中，我们使用了Vue.js 3的Composition API来定义组件。通过`ref`函数创建了一个响应式的`formData`对象，其中包含了`name`和`email`两个属性。在模板中，我们使用`v-model`指令将表单元素与`formData`对象的对应属性进行绑定。当表单元素的值发生变化时，`formData`对象的对应属性也会更新。在`submitForm`方法中，我们可以访问到表单对象的值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

vivk2017

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值