我正在嘗試對通過 Props 傳遞給子組件的父組件（插入和更新資料）中的陣列進行更改，但未更新 DOM。
父組件：
<UsersList
v-for="(role, i) in userRolesNames"
:key="i"
:users="usersPages[i].data"
/>
子組件：
<template>
<div
v-for="user in users"
:key="user.id"
>
<span>{{ user.name }}</span>
<div>
<i
class="bi bi-pen-fill edit-icon m-pointer"
@click="onClickEdit(user)"
></i>
<i
class="bi bi-trash-fill delete-icon ms-2 m-pointer"
@click="onClickDelete(user)"
></i>
</div>
</div>
</template>
<script lang="ts">
// recieving the array
props: {
users: {
required: true,
type: Array as PropType<usersType[]>
}
}
</script>
每個用戶基本上有以下結構：
{
id: x,
name: 'x',
email: 'x',
login: 'x',
role: x
}
問題是當嘗試在 usersPages[i].data 陣列中插入或更新記錄時，DOM 不會改變。如果我使用 Vue 開發人員工具，資料會正確更改，但 DOM 不會。
嘗試在陣列上使用 push 方法插入，但沒有成功。唯一有效的是：
const newUser = response.data;
const page = this.usersPages[newUser.role - 1];
Vue.set(page, 'data', [...page.data, newUser]);
為了更新，我嘗試直接更改用戶屬性，但就像插入一樣，DOM 不會更新。有效的是：
const page = this.usersPages[user.role - 1];
const oldUsers = page.data.filter(u => u.id != user.id);
Vue.set(page, 'data', [ ...oldUsers, response.data ]);
作業，但看起來不對......任何人都可以幫忙嗎？
uj5u.com熱心網友回復：
DOM 不會更新，因為您不是被動地進行更新。要被動地更新此值，您應該監聽一些事件（input例如），您將在子組件中發出該事件并將 new(!) 值傳遞給您的屬性。但更好的方法是通過v-model.
PS - 所以你可以看到 devtools 中的變化，因為這不是 Vue 生命周期的一部分，它就像一個觀察實際資料的決議器，但沒有背景關系。
uj5u.com熱心網友回復：
我以前也遇到過類似的問題。我相信這是vue中的一個錯誤。這樣做的原因是 Vuev-for已經渲染了。Vue 目前還不知道如何處理陣列中的變化。我對此的解決方法是將updateKey我的腳本中的一個變數設定為 0。然后每次更新陣列時增加這個變數updateKey 。我們將此密鑰用于我們的組件。
在子組件上，
<template>
<span
v-for="user in users"
:key="user.id"
>
<div :key="updateKey">
<span>{{ user.name }}</span>
<div>
<I
class="bi bi-pen-fill edit-icon m-pointer"
@click="onClickEdit(user)"
></i>
<I
class="bi bi-trash-fill delete-icon ms-2 m-pointer"
@click="onClickDelete(user)"
></i>
</div>
</div>
</span>
</template>
并onClickEdit(user)和onClickDelete(user)確保你有updateKey
uj5u.com熱心網友回復：
我決定創建一個示例來向 @peperoneen 展示我是如何做到的，因為我認為方法是正確的。但是在示例本身中，它有效，而在我的專案中，它沒有，唯一的區別是最初填充串列的方式。
為了加載用戶，我向回傳分頁資料的 API 發出請求，我通常使用“=”運算子分配這些資料。但是，我決定逐步進行分配，在用戶部分，我使用了“推送”方法。這樣，使用 push 和 filter 的 list 操作就可以正常作業了，更新 DOM 不需要使用 Vue.set
我認為問題在于串列的生成方式。我猜我不是被動地做...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/359545.html