elementUI input无法输入，elementUI switch无法切换，vue 输入框无法输入

最新推荐文章于 2024-07-15 15:24:14 发布

弘毅致远

最新推荐文章于 2024-07-15 15:24:14 发布

阅读量613

点赞数

分类专栏： Vue 文章标签： vue elementUI

本文链接：https://blog.csdn.net/zuo_hy/article/details/106872138

版权

当在Vue实例创建后添加新属性时，视图无法自动更新。为解决elementUI input无法输入和switch无法切换的问题，可以尝试四种方法：初始化时设定所有对象属性和默认值、使用Object.assign进行对象拷贝后再赋值、通过深度赋值方法或手动调用Vue的更新方法。

摘要由CSDN通过智能技术生成

在vue中如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

所以解决办法有以下四种：
方法一：初始化列出所有对象属性，并给默认值

data(){
    return{
        setPwdDialogVisible: false, // 弹窗展示数据
        setPwdContent: {
            acc:'',
            pwd:'',
            isadmin:false;
        }, // 详情弹窗展示内容
    }
}

原来写法是：

data(){
    return{
        setPwdDialogVisible: false, // 弹窗展示数据
        setPwdContent: null, // 详情弹窗展示内容
    }
}

方法二：先通过Object.assign对象拷贝，再赋值

clickSetPwd(scope)
{
        console.log(scope);
        let setPwdObject = [];
        setPwdObject.Account = scope.row.Account;
        setPwdObject.RealName = scope.row.RealName;
        setPwdObject.Password = '';
        setPwdObject.IsAdmin = scope.row.Type === 9;
        let obj