I want to verify that all elements in an array are of the type Item. However, once I implement this, the splice method stops functioning properly.
This is my current approach:
computedItems: {
get()
{
//return this.modelValue;
return this.modelValue?.map((item) => new Item(item));
},
set(newValue)
{
this.$emit("update:modelValue", newValue);
}
}
While this method works well, it appears to impact reactivity, as demonstrated by the following code snippet:
removeItem(item) {
let key = this.computedItems.findIndex((i) => {
return item === i;
});
this.computedItems.splice(key, 1);
}
The above snippet does not function correctly (no error is thrown, but the list is not updated).
Upon reverting to the previous implementation:
computedItems: {
get()
{
return this.modelValue;
},
set(newValue)
{
this.$emit("update:modelValue", newValue);
}
}
The splice operation functions as expected (even though items are not mapped to specific objects).
My inquiries:
- How can I resolve this issue?
- Why does this happen? Is mapping within the computed setter a suboptimal practice?