Vue.js

Question

我得到了一个父组件（一个表单）分解成子组件来处理不同类型的输入数据。数据是从 API 中预填充的。如果用户进行新选择或更改子组件中的某些数据，我想将其发送到父组件，以便我可以在表单提交事件中使用它并将新数据传递给 database/API.

以上逻辑适用于更新，但是，如果用户想要删除一个项目（通过选择下面屏幕截图中的“X”按钮），我还需要更新表单结果的数组，不包括“已删除”项。 结果数组的形式可以工作，但由于某种原因，我无法从 UI:

中删除卡片

父组件将表单值道具传递给子组件，子组件将更新发送回父组件：

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

有人可以查看我的 codesandbox 演示并帮助我弄清楚为什么我不能从 UI 中动态删除“卡片”吗？

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

Answer 1

我设法让一些东西起作用了。它实际上比我最初想象的要简单，因为您包含了很多文件（对于一个最小的、可重现的示例来说，需要的更多）。

基本上，归结为正确更新 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

Vue.js - 为什么我不能删除数组中的所有项目？

Vue.js - Why can't I delete all items from an array?

javascript

vuejs2