My custom Array extension has a feature where it intercepts changes made to its properties using Proxy, which is returned from the constructor. However, when used in a Vue component, it encounters issues. For example, when a filter is added, the display doesn't update and the watchEffect doesn't fire as expected. Although the value gets added correctly, there seems to be a conflict between my proxy and Vue's wrapper. I suspect this might be related to how proxies are handled internally within Vue.
Collection.js
export class MyCollection extends Array {
constructor(data) {
super();
this.add(data);
return new Proxy(this, {
set(target, prop, value) {
target[prop] = value;
if (prop === 'filters') {
const add = []
target.records.forEach((item) => {
if (item.id === target.filters) {
add.push(item)
}
})
target.add(add);
}
return true;
}
})
}
addFilters() {
this.filters = 1
}
add(items) {
this.length = 0;
items = Array.isArray(items) ? items : [items];
this.records = items;
console.log('here', this.records, this);
items.forEach((item) => this.push(item))
}
}
App.vue
<script setup>
import {watchEffect, computed, ref, toRaw} from "vue";
import {MyCollection} from "./Collection.js";
const collection1 = $ref(new MyCollection([{id: 1, display: 'one'}, {id: 2, display: 'two'}]));
watchEffect(() => {
console.log("wow", collection1);
});
const onClickUpdate1 =() => {
collection1.addFilters();
}
</script>
<template>
<div>
Collection 1
<button @click='onClickUpdate1'>
Add Filter
</button>
</div>
<div v-for="item in collection1" :key="item.id">
{{item.display}}
</div>
</template>