偶發的el-select無法選擇的問題

問題起源

最近借鑒開源管理系統若依（http://www.ruoyi.vip/）開發公司的管理系統，尤其是其使用VUE的前端。在借鑒若依用戶管理時遇到一個很怪的BUG。這個bug不能準確復現，但是希望通過這次問題闡述幫助整理清楚問題原因。

問題定位

在開發用戶管理界面，編輯已有用戶賬號時，其操作界面如下：

這次，我們遇到的問題是角色選項時，雖然返回的數據可以自動選中之前已經選擇的角色，但是無法勾選新角色，也無法取消已選角色，這讓我們陷入沉思，明明前端代碼是一樣的啊？為什么若依系統中可以，而自己的系統中就不可以呢？

關鍵代碼

我們來看一下這個對話框的代碼，

.... .....

我們剔除掉無關緊要或者與本次問題肯定無關的其他代碼部分，出問題的便是上方這個el-select組件。el-select組件官網：https://element.eleme.cn/#/zh-CN/component/select。文檔中也并沒有特別著名什么。因此，我們也正常書寫這段代碼。其中的form.roleIds格式為數組，data中，有：

data() { return { // 表單參數 form: {} } }

獲取用戶已有角色的接口方法：

/** 修改按鈕操作 */ handleUpdate(row) { this.reset(); const userId = row.userId || this.ids; // getUser為接口 getUser(userId).then(response => { this.form = response.data; // 現有用戶數據 this.roleOptions = response.roles; // 獲取所以角色權限 this.form.roleIds = response.roleIds; // 獲取用戶已有選項 this.open = true; // 打開對話框 this.title = "修改用戶"; // 對話框標題 this.form.password = ""; // 不修改密碼 }); }, reset() { this.form = { userId: undefined, deptId: undefined, userName: undefined, nickName: undefined, password: undefined, phonenumber: undefined, email: undefined, sex: undefined, status: "0", remark: undefined, postIds: [], roleIds: [] }; this.resetForm("form"); },

我們獲取用戶數據方法也基本相同，準確的說，沒有什么不同，但是我們的仍然是不可選的。

在網絡檢索“el-select”無法選中問題后，我們嘗試了一種可行的方法。

解決問題

一種說法是在form初始化時，其中的roleIds并沒有被添加到vue的自動監聽機制中，所以其值變化并沒有引起el-select的視圖刷新。但是，經過我們對form數據進行watch監聽，form也并沒有發生改變。

盡管如此，我們仍然嘗試了文中給出的解決辦法：使用this.$set(this.form, 'roleIds', newValue)設置已有角色，如下所示：

this.$set(this.form, 'roleIds', response.result.data.roleIds)

如此，竟然成功的解決了問題。

總結

最終，我們猜測，仍然是由于form.roleIds沒有被vue自動監聽機制發現，所以el-select無法做到視圖與數據的更新。

我們可以手動使用this.$set來解決該問題。

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。