在 vue-cli 项目中通过 v-model 绑定 el-input 输入内容不渲染

最新推荐文章于 2024-07-15 15:24:14 发布
最新推荐文章于 2024-07-15 15:24:14 发布
阅读量3.2k 收藏 4
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/candyHZhou/article/details/105065413
版权
在Vue CLI项目中遇到v-model绑定el-input输入内容无法渲染的问题，可以通过监听@input事件发现数据已改变。解决方案包括理解Vue的响应式原理，使用this.$set更新数据，为数组或对象赋新值，或者使用this.$forceUpdate强制刷新视图。
摘要由CSDN通过智能技术生成
解决方案

通过 @input 事件发现可以拿到当前输入的值，所以应该是数据改变了但是视图没更新

<el-input type="text" v-model="formData.reason" @input="change">
最低0.47元/天 解锁文章
itBellah
关注
Vue3（Vuex Vue-router Vue-cli)零基础入门到创建项目教程
champion564的博客
05-12 363
vue.jsvue语法1.1模板语法1.2、条件语句1.3循环语句2.1组件component3.1计算属性 3.2监听属性4.1样式绑定5.1事件处理6.1表单7.1自定义指令vue-router8.1路由9.1mixins10.1axiosvue-cli1、node.js与npm vue语法 1.1模板语法 插值 : 1文本 2 html (使用v-html指令操作html内容) 3属性** v-bind** 操作html属性 4 v-on监听事件 5** v-if** 条件语句 6** v-f
ElementUI input输入框不回显
JetBlack
11-11 4429
问题描述：在某个回调事件中，给表单中的某个input赋值(已绑定v-model)，input不显示数据且无法编辑，在这个表单的其他input中修改值时，这个被赋值的input才会回显。 解决办法：在回调事件函数中，给input赋值后，强制刷新：this.$forceUpdate(); ...
vue element-UI 更新输入数据但页面未及时渲染的问题
weixin_40425415的博客
12-28 3495
使用el-select时选中值改变但没有渲染变化 在el-select上绑定change方法，使用this.$forceUpdate()强制更新一下select // HTML <el-select v-model="value" @change="changeSelect" placeholder="请选择"> <el-option v-for="(item, index) in options" :key="index"
Vue + ElementUI el-input无法输入、修改、删除的问题，输入无效
最新发布
qq_38572963的博客
07-15 1152
【代码】Vue + ElementUI el-input无法输入、修改、删除的问题，输入无效。
vue之修改v-model页面不渲染
b_just的博客
06-29 2128
在created 里给变量input框赋值后 页面没有任何改变,v-model bug了么 打了断点 发现修改input框 其实this 已经拿到值了 至于页面刷新的问题有2种解决方案 this.$set(this.form,‘data’,2); 推荐 //this.form为在data中声明的数组名，‘data’是要改变的数组下的指定字段名，2是要变化的值 this.$forceUpdate() 强制刷新 ...
Vue中this.$forceUpdate()解决 input框输入框失效 数据改变但未渲染的问题
tann888的博客
03-26 2368
项目中的问题 通过接口请求回显的数据，在input框中是能看到的，但是我点进去输入框都无法编辑。 解决方式： <template> <el-input v-model="item.width" style="width: 80px; margin-right: 10px;" @input="changeInp($event)"></el-input> </template> <script> export default {
2021年12月27日问题记录——element ui 直接赋值页面不渲染的问题
秋风萧瑟
12-27 562
今天使用vue element ui 发现一个问题，就是在表格单选中直接在函数中用this.form.machineId=val.machiId这种赋值方式前端页面并不会渲染数据，但是this.form中确实已经有这个数据了。如下图： 但是要是把赋值方式改成下图这种方式，就可以： 暂时还不知道这是为啥，先记录一下...... ...
el-table中的el-input标签修改值，但界面未更新，解决方法
YaoQing222的博客
11-02 1745
el-table里的el-input未生效
Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解
11-27
在深入探讨Vue实例、生命周期和Vue脚手架（vue-cli）之前，我们需要理解Vue实例的基本构造。 Vue实例是Vue应用程序的核心，通过`new Vue()`来创建。这实际上是一个构造函数，用于初始化一个新的ViewModel。在创建...
vue入门 webpack+loader \vue-cli
04-17
<input type="text" v-model="msg"> {{ msg }} var c = new Vue({ el: '#box', data: { msg: 'welcome vue' } }); ``` ##### 6.3 事件处理 Vue.js 支持添加事件监听器来响应用户的交互行为。 - ...
[の项目练习]Vue-Cli、API的头条新闻项目
weixin_44275036的博客
03-13 1106
一、API 接口注册 1. 注册申请 聚合数据【点击进入】 进行注册、实名制认证后 搜索"新闻头条"【点击进入】 申请后获得一个key值 2. API 接口说明 接口地址：http://v.juhe.cn/toutiao/index 返回格式：json 请求方式：get/post 请求示例：http://v.juhe.cn/toutiao/index?type=top&key=APPKEY 接口备注：返回头条，社会，国内，娱乐，体育，军事，科技，财经，时尚等新闻信息 3. 请求参数说明
(vue)mouted里的用的data里的值为null或undefined导致渲染失败
nyf_unknow的博客
08-23 869
法二：that=this。法一：定时器+箭头函数。
el-input输入内容延迟渲染问题
fuqiang133的博客
10-06 544
el-input输入内容延迟渲染问题
element table中加入input、checkbox 数据无法正常渲染问题
u011028557的博客
08-01 706
element table中加入input、checkbox 数据无法正常渲染问题
el-input 赋值 不回显
Ninewu的博客
04-12 3218
问题：给input框赋值不回显需要点击其他输入框才会回显 解决：事件中添加 强制刷新 this.$forceUpdate() 好啦，测试一下
vue之修改v-model页面不渲染么
weixin_45102633的博客
05-18 1399
有没有和我一样的 在created 里给变量input框赋值后 页面没有任何改变,v-model bug了么 我打了断点 发现修改input框 其实this 已经拿到值了 至于页面刷新的问题有2种解决方案 this.$set(this.form,‘data’,2); 推荐 this.$forceUpdate() 强制刷新 我想不刷新可能是页面层级嵌套过多吧 ...
Vue开发循环数据列表绑定的数据，数据列表发生变化页面没有重新渲染的问题解决办法！
海贼王某人的博客
09-15 1031
这个坑我已经踩过三次了，今天才来写，虽然是个小bug，但我希望能帮到正在踩坑的你，看一段代码： <el-input v-for="(item, index) of dataList" :key="index" :value="item.value" /> 这只是个实例，element输入框，dataList是循环的input框，每一个input有一个指定的id,不一样，然后循环出来的数据，我们会发现，改变了其中某一个的值其他的值会跟着
Vue Element ui input无法输入问题原因及彻底解决
qq_23490959的博客
06-19 5043
【代码】Vue Element ui input无法输入问题原因及彻底解决。
Vue-CLI项目中El-tree自定义增删改操作与局部刷新懒加载详解
在Vue CLI项目中，本文将深入探讨如何使用Element UI中的el-tree树形控件实现自定义功能，包括添加、删除、修改节点以及局部刷新和懒加载操作。首先，我们关注的是如何设置一级节点为本地节点，并默认展开，以便于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值