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

在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 =  Object.assign({},this.setPwdContent,setPwdObject)
        this.setPwdContent = obj;
        this.setPwdDialogVisible = true;
}

解决方法三：通过深度赋值方法

this.$set(this.setPwdContent,'Account',scope.row.Account);

解决方法四：
在相应事件中手动调用试图更新方法

change(e) {
    this.$forceUpdate();
},

 

<el-dialog title="设置密码"
               :visible.sync="setPwdDialogVisible"
               width="400px"
               v-if="setPwdContent">
      <ul class="detail_box">
        <li class="list_item">
          <span>姓名</span>
          <span>{{setPwdContent.RealName}}</span>
        </li>
        <li class="list_item">
          <span>密码</span>
          <el-input v-model="setPwdContent.Password" @change="change()" size="mini" style="width:200px"></el-input>
        </li>
        <li class="list_item">
          <span>管理员</span>
          <el-switch
            v-model="setPwdContent.IsAdmin"
            active-color="#1890ff"
            inactive-color="#DCDFE6">
          </el-switch>
        </li>
      </ul>
      <div style=" text-align: center;">
        <el-button type="primary" size="mini" @click="setUserPwd">确 定</el-button>
      </div>
    </el-dialog>