[Q] Why do I have to recognize the proxy when performing operations on arrays?
PhilippCh opened this issue · 1 comments
I have the following code in my VueJS app:
export const store = syncedStore({
tasks: [] as Task[],
tags: [] as Tag[],
systemState: {} as SystemState,
fragment: 'xml'
});
const doc = getYjsDoc(store);
const roomName = 'shoppr';
export const webrtcProvider = new WebsocketProvider(Config.get().websocketBaseUrl, roomName, doc);
const offlineProvider = new IndexeddbPersistence(roomName, doc);
offlineProvider.once('synced', () => {
console.log('initial content loaded');
console.log(store.tasks.filter((x) => x.value.title === 'Eszet Schnitten'));
});
Please take note of the last line console.log(store.tasks.filter((x) => x.value.title === 'Eszet Schnitten'));
. When writing the filter including the .value
object, thus recognizing that there is a Boxed Proxy the actual object is behind, the filter works fine, but gives me compiler warnings about value
missing on Task
(the type of store.tasks
). Writing the filter without the .value
proxy like this console.log(store.tasks.filter((x) => x.title === 'Eszet Schnitten'));
results in x.title
being undefined because x
is of type Boxed
. Is there anything I'm doing wrong here?
For reference, I'm enabling Vue bindings in main.ts
with
import { enableVueBindings } from '@syncedstore/core';
import * as Vue from 'vue';
enableVueBindings(Vue);
I think you can fix this by using tags: [] as Boxed<Tag>[]
in your definition