Vue.js-為什么我不能從陣列中洗掉所有專案？-有解無憂

我有一個父組件（一個表單）分解成子組件來處理不同型別的輸入資料。資料是從 API 預先填充的。如果用戶進行新選擇或更改子組件中的某些資料，我想將其發送到父組件，以便我可以在表單提交事件中使用它并將此新資料傳遞給資料庫/API。

上述邏輯適用于更新，但是，如果用戶想要洗掉一個專案（通過選擇下面顯示的螢屏截圖中的“X”按鈕），我還需要更新表單結果的陣列，而不包括“已洗掉”的專案。表單 Results 陣列可以正常作業，但由于某種原因，我無法從 UI 中洗掉卡片：

Vue.js - 為什么我不能從陣列中洗掉所有專案？

父組件將表單值 props 傳遞給子組件，子組件將更新發送回父組件：

<ISOAdminDivForm />
    <ISOAdminDivFormName />
        <ISOAdminDivFormNameItem />

有人可以查看我的 codeandbox 演示并幫助我弄清楚為什么我不能從 UI 中動態洗掉“卡片”嗎？

https://codesandbox.io/s/foundation-form-names-forked-tvwpu?file=/src/components/ISOAdminDivFormName.vue

uj5u.com熱心網友回復：

我設法讓一些作業。它實際上比我最初想象的要簡單，因為您包含了許多檔案（對于最小的、可重現的示例來說，這超出了所需的數量）。

基本上，它歸結為正確更新divisionLanguages資料屬性。

為了簡化起見，我洗掉了formValues資料，因為我認為divisionLanguages.data.

正如我在評論中所說，要在 Vue 中更新反應式串列，您需要使用Array.splice.

因此，您的deleteItem方法需要找到要洗掉的專案的索引，然后將陣列與所述索引拼接：

deleteItem(id) {
  const elementIndex = this.divisionLanguages.data.findIndex(
    (x) => x.P_uniqueID === id
  );
  this.divisionLanguages.data.splice(elementIndex, 1);
  this.$emit("languages", this.divisionLanguages.data);
}

這是分叉的沙箱：https ://codesandbox.io/s/foundation-form-names-forked-b7sy2?file =/ src/components/ ISOAdminDivFormName.vue

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/352422.html

標籤：javascript Vue.js Vuejs2

上一篇：如何在使用Django和React時修復500內部服務器錯誤

下一篇：在Vuex中，為什么模塊的狀態被訪問為“store.state.module”而不是“store.module.state”？