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