解决element-ui el-input赋值后不能编辑的问题
更新时间：2024年02月29日 09:13:17 作者：仙女爱吃鱼
这篇文章主要介绍了解决element-ui el-input赋值后不能编辑的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
element-ui el-input赋值后不能编辑
接口数据给el-input赋值成功后不能编辑
原因
在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新
解决办法
在data中赋初始值或使用Vue的全局api $set()，把属性处理成一个响应式的属性，此时视图也会跟着改变了
vue elementui给input动态赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<script src="//unpkg.com/vue@2"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<title>表单</title>
</head>
<body>
<div id="app">
<el-input v-model="input" placeholder="请输入内容" ref="input"></el-input>
<p>message:{{message}}</p>
<button @click="handleClick">按钮</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data(){
return{
message:"23123",
input:'12'
}
},
methods:{
handleClick(){
this.$set(this, "input", 6);
console.log(this.$refs.input.value)
}
}
})
</script>
</body>
</html>
this.$set(this, "input", 6);
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了vue保存自动格式化换行，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了Vue.js双向绑定操作技巧(初级入门)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
vue配置代理vue.config.js后不生效的解决(小坑)
这篇文章主要介绍了vue配置代理vue.config.js后不生效的解决(小坑)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
本文主要介绍了elementUI组件el-dropdown的一些坑，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
vue对依赖的管理使用的是发布订阅者模式，其中watcher扮演订阅者，Dep扮演发布者。所以dep中会有多个watcher，一个订阅者也可以有多个发布者(依赖)。总共三个过程：定义依赖、收集依赖、触发依赖。下面开始详细讲解三个过程2022-10-10
这篇文章主要为大家介绍了vue实现搜索关键词高亮的详细教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了Mint UI组件库CheckList使用及踩坑总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
在本篇文章中小编给大家整理的是一篇关于vue-devtools安装使用的相关知识点内容，有需要的朋友们可以学习下。2019-10-10
这篇文章主要为大家介绍了vue项目打包开启gzip压缩具体使用方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
VUE3+mqtt封装解决多页面使用需重复连接等问题(附实例)
最近了解到mqtt这样一个协议,可以在web上达到即时通讯的效果,下面这篇文章主要给大家介绍了关于VUE3+mqtt封装解决多页面使用需重复连接等问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
最新评论