解决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-axios进行数据交互详情，文章围绕Vue-axios进行数据交互的相关资料展开详细内容，需要的小伙伴可以参考一下，希望对你的学习或工作有所帮助2022-03-03
Vue element-UI el-select循环选中的问题
这篇文章主要介绍了Vue element-UI el-select循环选中的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue表单验证rules及validator验证器的使用方法实例
在vue开发中,难免遇到各种表单校验,下面这篇文章主要给大家介绍了关于vue表单验证rules及validator验证器使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了Vue组件的计算属性和普通属性的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了electron踩坑之dialog中的callback解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
在开发现代 Web 应用时,前端和后端通常分离部署在不同的服务器上,这就会引发跨域请求问题,所以本文将详细介绍如何在 Vue 项目中使用 Axios 发起跨域请求时解决跨域问题的相关资料,需要的朋友可以参考下2024-09-09
有时候给页面内容添加一个关键词搜索功能,如果搜索结果能够像浏览器搜索一样高亮显示,那找起来就会很明显体验会好很多,本文就来介绍一下vue搜索高亮popsearch组件的实现示例,感兴趣的可以了解一下2023-09-09
过滤器是vue为开发者提供的功能，常用于文本的格式化，过滤器应该被添加在JavaScrip表达式的尾部，由“管道符”进行调用，这篇文章通过案例给大家讲解Vue过滤器介绍及使用方法，需要的朋友参考下吧2022-11-11
这篇文章主要介绍了对vuex中store和$store的区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
element-ui form表单的动态rules校验功能实现
在vue项目中，有时候可能会用到element-ui form表单的动态rules校验，这篇文章主要介绍了element-ui form表单的动态rules校验,我们可以巧妙的运用element-ui form表单里面form-item的校验规则来处理，本文结合实例代码介绍的非常详细，需要的朋友可以参考下2023-07-07
最新评论