首頁猿問 Vuejs/Vuex...

Vuejs/Vuex 如何使用突變在 vuex 狀態的對象數組中刪除（過濾）對象

JavaScript

互換的青春 2022-12-02 17:00:30

我試圖在我的嵌套（對象->數組->對象）vuex 狀態中刪除一個對象。我的應用場景是這樣的：1.我會向后端發送刪除記錄的請求，然后只返回一條消息的響應。然后提交到 vuex 狀態UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM。這里的一切都很好。 async unassignCoursandTeacher({ commit }, classroom) { let response = await Axios.post( "/dashboard/school/unassignCoursandTeacher/" + classroom.id, classroom ); let cls = response.data; if ( response.status == 200 || response.status == 201 || response.status == 204 ) { commit("UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM", cls); return cls; } }現在我想在singleClassroom突變的幫助下更新狀態。但它不會刪除狀態中的刪除項。僅當我刷新頁面時。以下是突變的設置方式。`UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) { let cours = state.singleClassroom.courses.filter(c => c.id != cls); state.singleClassroom.courses = cours; }`這是我在 vuex 狀態下的數據結構：

查看完整描述

3 回答

蝴蝶不菲

TA貢獻1810條經驗獲得超4個贊

你的邏輯完全沒問題。但是在你的一句話中你提到“我會向后端發送刪除記錄的請求，然后只返回一條消息的響應。 ”這意味著除了 json 消息之外你沒有返回任何數據（我認為）。這意味著cls是空的，你正試圖singleClassroom用空值過濾狀態。那肯定不行。

所以我會建議設置你試圖在你的ACTION. 請看下面的代碼：

改變這個

async unassignCoursandTeacher({ commit }, classroom) {

let response = await Axios.post(

"/dashboard/school/unassignCoursandTeacher/" + classroom.id,classroom

);

let cls = response.data; // You are assigning cls to an empty attribute - this where the issue is.

if (

response.status == 200 ||

response.status == 201 ||

response.status == 204

) {

commit("UNASSIGN_COURS_AND_TEACHER_FROM_CLASSROOM", cls);

return cls;

}

為此

async unassignCoursandTeacher({ commit }, classroom) {

let response = await Axios.post(

"/dashboard/school/unassignCoursandTeacher/" + classroom.id,classroom

);

if (

response.status == 200 ||

response.status == 201 ||

response.status == 204

) {

let cls = classroom.yourCoursID; // Here we are assigning cls value to the cours ID.

commit("UNASSIGN_COURS_AND_TEACHER_FROM_CLASSROOM", cls);

return cls;

}

反對回復 2022-12-02

手掌心

TA貢獻1942條經驗獲得超3個贊

我不確定我是否同意@Rodrigo。Vuex 狀態作為data組件中的屬性是反應性的，我想您在 vuex 狀態中定義了 singleClassroom 數據（包括 courses 屬性），使其具有反應性。我認為這種情況不適用于此處列出的變更檢測警告。

我不知道是什么cls，但我懷疑它代表一個 id。這是因為您從response.data. 我強烈懷疑cls是您要刪除的課程，并且您正在針對它過濾課程 ID，但它們不是同一類型。我還可以建議您使用嚴格相等 (===)，因為它可以減少出現錯誤的機會。

我認為問題可能出在這里

UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) {

let cours = state.singleClassroom.courses.filter(c => c.id != cls); // if cls is the course, I think you are filtering the wrong thing

state.singleClassroom.courses = cours;

}

嘗試更改為

UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) {

let cours = state.singleClassroom.courses.filter(c => c.id !== cls.id);

state.singleClassroom.courses = cours;

}

反對回復 2022-12-02

ibeautiful

TA貢獻1993條經驗獲得超6個贊

嘗試使用Vue.set( target, propertyName/index, value )更新您的對象。

向響應式對象添加一個屬性，確保新屬性也是響應式的，從而觸發視圖更新。這必須用于向反應對象添加新屬性，因為 Vue 無法檢測正常的屬性添加（例如 this.myObject.newProperty = 'hi'）。

UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) {

let cours = state.singleClassroom.courses.filter(c => c.id != cls);

Vue.set(state.singleClassroom, 'courses', cours);

}

https://v2.vuejs.org/v2/api/#Vue-set

反對回復 2022-12-02

3 回答
0 關注
213 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Vuejs/Vuex 如何使用突變在 vuex 狀態的對象數組中刪除（過濾）對象

Vuejs/Vuex 如何使用突變在 vuex 狀態的對象數組中刪除（過濾）對象

3 回答

添加回答