解决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保存自动格式化换行

    详解vue保存自动格式化换行

    这篇文章主要为大家介绍了vue保存自动格式化换行,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • Vue.js双向绑定操作技巧(初级入门)

    Vue.js双向绑定操作技巧(初级入门)

    这篇文章主要介绍了Vue.js双向绑定操作技巧(初级入门)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • vue配置代理vue.config.js后不生效的解决(小坑)

    vue配置代理vue.config.js后不生效的解决(小坑)

    这篇文章主要介绍了vue配置代理vue.config.js后不生效的解决(小坑),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • elementUI组件el-dropdown(踩坑)

    elementUI组件el-dropdown(踩坑)

    本文主要介绍了elementUI组件el-dropdown的一些坑,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • Vue收集依赖与触发依赖源码刨析

    Vue收集依赖与触发依赖源码刨析

    vue对依赖的管理使用的是发布订阅者模式,其中watcher扮演订阅者,Dep扮演发布者。所以dep中会有多个watcher,一个订阅者也可以有多个发布者(依赖)。总共三个过程:定义依赖、收集依赖、触发依赖。下面开始详细讲解三个过程
    2022-10-10
  • vue实现搜索关键词高亮的详细教程

    vue实现搜索关键词高亮的详细教程

    这篇文章主要为大家介绍了vue实现搜索关键词高亮的详细教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Mint UI组件库CheckList使用及踩坑总结

    Mint UI组件库CheckList使用及踩坑总结

    这篇文章主要介绍了Mint UI组件库CheckList使用及踩坑总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue-devtools的安装和使用步骤详解

    vue-devtools的安装和使用步骤详解

    在本篇文章中小编给大家整理的是一篇关于vue-devtools安装使用的相关知识点内容,有需要的朋友们可以学习下。
    2019-10-10
  • vue项目打包开启gzip压缩具体使用方法

    vue项目打包开启gzip压缩具体使用方法

    这篇文章主要为大家介绍了vue项目打包开启gzip压缩具体使用方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • VUE3+mqtt封装解决多页面使用需重复连接等问题(附实例)

    VUE3+mqtt封装解决多页面使用需重复连接等问题(附实例)

    最近了解到mqtt这样一个协议,可以在web上达到即时通讯的效果,下面这篇文章主要给大家介绍了关于VUE3+mqtt封装解决多页面使用需重复连接等问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04

最新评论