Splice on computed item that maps elements

user_7510971 0
Viewed 81

I'd like to ensure that all objects in an array are of type Item. If I do so, a splice does no longer work later.

This is how I do this:

computedItems: {
    get()
    {
        //return this.modelValue;
        return this.modelValue?.map((item) => new Item(item));
    },
    set(newValue)
    {
        this.$emit("update:modelValue", newValue);
    }
}

This works fine but it seems to break reactivity, as:

removeItem(item) {
    let key = this.computedItems.findIndex((i) => {
        return item === i;
    });

    this.computedItems.splice(key, 1);
}

does not work (no error, list is just not being updated).

If I do

computedItems: {
    get()
    {
        return this.modelValue;
    },
    set(newValue)
    {
        this.$emit("update:modelValue", newValue);
    }
}

the splice does work as expected (but the items are not mapped to the specific object).

My questions:

  1. How can I solve that?
  2. Why is that the case? Is it a bad idea to map within the computed setter?
vuejs3 vue.js javascript
1 Answers

I'm not sure why it happens and cannot explain it very well.

Array and Object is keeping in memories. So it’s a pointer to memories. The pointer was not changing and nothing is reactive. (Headache)

Can you try this code:

removeItem(item) {

    const newArray = [...this.computedItems];
    let key = newArray.findIndex(i => item === i);

    newArray.splice(key, 1);

    this.computedItems = newArray;
}
user_136049540
Related