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

by

0👍

✅

I managed to have something working. It was actually simpler than I thought originally since you included many files (more than needed for a minimal, reproducible example).

Basically, it boils down to properly updating the divisionLanguages data property.

To make it simpler, I removed the formValues data since I think is just confusing and redundant with divisionLanguages.data.

As I said in my comments, to update a reactive list in Vue, you need to use Array.splice.

So your deleteItem method will need to find the index of the item to remove then splice the array with said index:

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);
}

Here is the forked sandbox: https://codesandbox.io/s/foundation-form-names-forked-b7sy2?file=/src/components/ISOAdminDivFormName.vue

Leave a comment