elementui中给input框赋值成功后input框不能进行编辑问题

选中一项后，input框不能进行编辑

<el-select v-model="input.memoStyle" placeholder="Log Landlord Call"@change="memoStyleChange"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>js:
data() {return {options: [{value: '1', label: 'Listing is still available'},{value: '2', label: 'Landlord could not be reached'}],input: {}}},methods:{memoStyleChange(item) {if (item == 1) {this.input.description = 'Listing is still available';} else {this.input.description= 'Landlord could not be reached';}
}

直接赋值后导致input框不能进行编辑

解决方法一、
改变data数据初始值

input: {description:''
},

解决方法二、

methods:{memoStyleChange(item) {if (item == 1) {this.$set(this.input, 'description', 'Listing is still available')} else {this.$set(this.input, 'description', 'Landlord could not be reached')}
}

原因在于在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api $set()：

$set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了

elementui中给input框赋值成功后input框不能进行编辑问题相关推荐

jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法参考文章: (1)jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 ( ...
ajax 请求成功再执行javascript,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
调用$.ajax不成功,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
elementUi中的el-upload上传文件后换封面功能及预览大图结合el-image开发
一.el-upload上传后换封面原始效果如下: (上传图片时正常显示图片封面,但是上传其他格式文件时,没有封面,只有一个小的缩略默认图片) 预期效果如下: (上传图片->显示图片.上传pdf ...
Winform中自定义ZedGraph右键复制成功后的提示
场景 Winform中实现ZedGraph中曲线右键显示为中文: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100115292 ...
php js给input的赋值,JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题_javascript技巧...
在自己做东西时,遇见了一个问题.就拿博客园的首页右边的搜索举例吧,用控制台操作. 现在我需要从另外一个地方将数据传给input,让其在一刷新的时候就显示数据. 这不难啊,于是我按照我的理解做了代码如 ...
Winform中实现简单的登录成功后跳转到主页面的逻辑
场景 Winform中实现运行项目后首先启动登录窗体,验证成功之后,跳转到主页面. 注: 博客: BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot, ...
ElementUI中el-table-column的type为selection时选择框旁边有个点
场景使用el-table的多选框时,el-table-column的type为selection时,显示为勾选框. 但是会在勾选框旁边显示一个实心的小点. 注: 博客: https://blog.c ...
解决密码中包含{}，密码修改成功后, 查询分析器无法用此密码登录的问题
<iframe align="top" marginwidth="0" marginheight="0" src="http ...

elementui中给input框赋值成功后input框不能进行编辑问题

原因在于在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api $set()：

$set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了

elementui中给input框赋值成功后input框不能进行编辑问题相关推荐

最新文章

热门文章