vue子组件中的input使用v-model报错

最新推荐文章于 2023-05-11 17:33:54 发布

原创最新推荐文章于 2023-05-11 17:33:54 发布 · 3.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue修改input #子组件 #v-model #父子组件传值 #:value

收录于

在Vue中，子组件使用Input元素时，若直接应用v-model会触发错误。本文介绍如何通过:value绑定值并利用@input事件，结合this.$emit传递变更到父组件，实现数据的双向绑定。

vue中子组件中input的值是从父组件传过来的，所以子组件的input标签如果用v-model就会报如图错误，

解决方案：

<el-input :value="configure_edgeName" placeholder="请输入edge名称" @input="nameChange"></el-input>

使用:value存值，然后使用@input方法，在nameChange使用this.$emit将值传到父组件在父组件中更改。（如何传值到父组件请看上篇文章）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Zxiuping

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

input中v-model和value不能同时调用时解决方案

asdfgh0077的博客

11-23

1394

input中v-model和value不能同时调用时解决方案

参与评论您还未登录，请先登录后发表或查看评论

Ant Design Vue 输入框绑定不上值解决方案

qwe122343的博客

04-02

5977

在使用 Ant Design Vue 练习动态增减表单项时，发现输入框无法绑定值，原因出在 <a-input> 标签的写法上。错误写法： <a-input v-model="item.value"></a-input> 正确写法：在 v-model 后面增加 :value <a-input v-model:value="item.value"></a-input> ...

Vue3 + Directive input元素绑定指令后，在指令中更新input value，v-model未生效

jiaweiliao的博客

01-17

4007

v-model未生效其实（:value绑定的变量未更新）其实就是在指令中改变输入框value时未触发“@input”事件，导致v-moel未生效。可利用dispatchEvent方法收到触发input事件，使v-model生效，更新变量。

【VUE】使用v-for时给input绑定v-model报错

SZnAl的博客

09-15

1058

使用v-for时给input绑定v-model控制台报错：You are binding v-model directly to a v-for iteration alias. This will not 解决方法

value属性、v-model属性类型错误

名字还没有想好的博客

03-28

3300

1、报错 [Vue warn]: Invalid prop: type check failed for prop "value". Expected Number with value 4.7, got String with value "4.7". 2、报错原因（1）、后台返回的数据，是String类型的，而组件Rate要求的v-model或者value属性的值为number型，...

升级Vue2.0后prop不能双向绑定的解决办法

weixin_34365417的博客

12-21

488

前言从Vue1.0升级到Vue2.0后，有很多改动，今天来讨论下prop没有了sync之后的解决方法。从官方角度来讲，为了规范数据流动，砍掉了.sync，目的很明显，阻止子组件影响父组件的数据。然而有很多时候还是需要双向绑定的，比如表单组件。所以可以用用于表单组件的v-model来实现双向绑定，对应的prop也就是value 注...

Vue+iview Modal组件关闭弹框之后报错问题

weixin_33750452的博客

07-06

1721

问题描述: 父组件调用子组件Modal的时候,关闭弹框之后会报错一共有下面几种情况 1，直接使用Modal组件(非自定义modal组件) 父组件代码 <template> <div class="Demo"> <Button type="primary" @click="value = !value">打开弹框</Button&g...

Vue中父子组件的通信问题（未解决）

qq_46650680的博客

10-28

447

想要的效果是：在input框里输入内容，不仅能够改变子组件里的值，还能改变父组件的num值。问题：修改了input里的内容，父组件中的num并未改变。

vue中直接修改父级传过来的值会直接报错

kaolagirl的博客

04-27

546

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、什么是组件二、父组件向子组件传值1. 新建组件MyComponent（子组件）2. 在父组件中引入子组件3.在子组件中获取传值1.第一种方式2.第二种方式总结前言这里主要记录通过组件传值的方式显示弹窗一、什么是组件组件其实是指具有特定功能的标签二、父组件向子组件传值 1. 新建组件MyComponent（子组件） 2. 在父组件中引入子组件 代码如下（示例）： <template> &l.

oninput引发v-model失效

weixin_45894503的博客

04-20

1300

问题场景例：在el-input中先输入中文字符,再输入数字,v-model失去监听 <el-input v-model="ruleForm.refundMoney" disabled="disabled" :placeholder="`本次可以退款最高${dataList.canRefundAmount}美元`" oninput="value=value.replace(/[^0-9.]/g,'')" clearable/> 原因分析： v-model本

解决vue中v-model双向绑定失败，表单数据不能回显的问题

weixin_43843824的博客

12-19

1万+

解决vue中v-model双向绑定失败，表单数据不能回显的问题在vue中使用v-model="columns[i].value"或v-model="column[value]"进行双向绑定时或者在绑定事件中使用赋值形式改变绑定变量的值如： handleChange(value){ switch (value){ case 1:this.Model.value=600;this.Model.Precision=0;break; case 2:this.Model.va

Input组件封装的v-model问题

front_endxiaobaia的博客

05-31

2503

一、关于组件的封装： v-bind="$attrs"与v-on="$listener"是组件封装或二次封装过程中经常使用的指令，q

[ant design vue] 关于ant design vue 表单报错合集

m0_59697051的博客

02-16

2656

情况一：当我点击新增时会报以下错误：原因是我在使用v-decorator的同时使用了v-model，如下图：解决方案就是：把v-model删掉，需要动态获取值，可以通过: this.form.getFieldValue('fa_No') 情况二：当我点击编辑时会报以下错误：原因是我在点击编辑给表单赋值时，值不是一对一赋值，而是一次性赋值导致一些在表单中没有写的参数，但是record中有，赋值只能少不能多所以导致报错了，如下图：解决方案就是使用this.form.setF..

vue3 组件响应式v-model 失效，实践踩坑，一文搞懂组件响应式原理，对初学者友好

热门推荐

潜心

11-04

1万+

📚vue3专栏☃️ 个人简介：一个喜爱技术的人。🌞 励志格言: 脚踏实地，虚心学习。

v-mode和自定义input事件双向绑定发生冲突解决方法

ll1943603292的博客

05-11

858

今天改一个需求时，需要使用到input e.target.value 和@input事件实现双向绑定，但是input表单已经使用了v-model语法糖。这时候想到的方法是promise 或许async 回调函数来解决这种问题，但是在部门老大的指导下一句代码解决问题，使用倒计时。这个时候由于JS原生的优先级肯定是会更高的，所以就会导致v-model绑定的值并没有实时更新。

vue v-model失效原因及解决方案

weixin_43989656的博客

03-22

1万+

可以使用 Promise 或 async/await 等方式来等待异步操作完成后再更新数据，或者使用 Vue.nextTick 方法来确保 DOM 已经更新。解决方案：当需要修改一个数组或对象中的某个元素时，应该使用 Vue.set 或 this.$set 方法来更新。

element-ui的el-input组件使用v-model部署出现无法输入情况

qq_52568607的博客

09-11

2266

el-input组件使用v-model部署后无法输入

v-for字符串数组，v-model到el-input时报语法错误

xc_buxiangzhangda的博客

02-19

4100

1、如果v-for循环字符串数组，绑定到v-model时 phones=["1802231","13fds"]  <el-input v-for="(item,index) in phones" v-model="phones[index]" :key="index"></el-input>item.na

vite+ts 中全局定义的方法无法识别类型报错类型“{ $: ComponentInternalInstance；...“

业余前端的职业经历

04-06

2008

因为有一些全局的方法我们直接挂在了 app.config.globalProperties。但是我们挂完之后发现在模版中使用的时候会出现ts的语法报错提示。然后可以直接在模板中使用这些方法比如一些过滤器什么的东西。在全局的声明文件中你也可以自己创建一个文件哈。其实你不管也没啥子影响不影响程序的运行哈。这个时候其实需要我们提前声明一下就可以了。然后再回去看好像没有报错了是吧。关注我持续更新前端知识。

记录一下vue3和ts的坑 (遇到就会写)

u013505589的博客

12-02

5593

1. vue3 全局挂载问题在vue2中，全局挂载通过Vue.prototype的方式,通过原型定义在每个vue实例中可用 vue2中的方法在main.js 使用Vue.prototype.$xxx = zzz(zzz可以是变量也可以是import的方法) // 例子 Vue.prototype.$test = 50...