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>