Cannot add custom ts class obj to reactive array: Uncaught (in promise) TypeError: parent is null
Version
3.2.6
Reproduction link
Steps to reproduce
Click on the add button, a new element should appear in the currently empty list. You find the error in the dev console.
What is expected?
That the add()
method adds a element to the array.
class InputUI {
public title: string;
public icon: string;
public key: string;
constructor(title: string, icon: string, key: string) {
this.icon = icon;
this.key = key;
this.title = title;
}
}
const currentList: Array<InputUI> = reactive(new Array<InputUI>());
const add = () => {
currentList.push(
new InputUI("test", "fa-key", "key")
);
}
What is actually happening?
17:14:31.816 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <FormsManagerForms3 onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<
Proxy { <target>: {…}, <handler>: {…} }
> >
at <RouterView>
at <FormsManagerEdit onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<
Proxy { <target>: {…}, <handler>: {…} }
> >
at <RouterView>
at <MainContent>
at <FormsManagerIndex onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<
Proxy { <target>: {…}, <handler>: {…} }
> >
at <RouterView>
at <APPHOME onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<
Proxy { <target>: {…}, <handler>: {…} }
> >
at <RouterView>
at <App> runtime-core.esm-bundler.js:6873
17:14:31.830 Uncaught (in promise) TypeError: parent is null
insert runtime-dom.esm-bundler.js:10
mountElement runtime-core.esm-bundler.js:4148
processElement runtime-core.esm-bundler.js:4068
patch runtime-core.esm-bundler.js:3988
patchKeyedChildren runtime-core.esm-bundler.js:4797
patchChildren runtime-core.esm-bundler.js:4680
processFragment runtime-core.esm-bundler.js:4385
patch runtime-core.esm-bundler.js:3984
patchBlockChildren runtime-core.esm-bundler.js:4305
patchElement runtime-core.esm-bundler.js:4213
processElement runtime-core.esm-bundler.js:4071
patch runtime-core.esm-bundler.js:3988
componentUpdateFn runtime-core.esm-bundler.js:4606
run reactivity.esm-bundler.js:160
callWithErrorHandling runtime-core.esm-bundler.js:6990
flushJobs runtime-core.esm-bundler.js:7221
promise callback*queueFlush runtime-core.esm-bundler.js:7120
queueJob runtime-core.esm-bundler.js:7114
effect runtime-core.esm-bundler.js:4638
triggerEffects reactivity.esm-bundler.js:358
trigger reactivity.esm-bundler.js:343
set reactivity.esm-bundler.js:472
key reactivity.esm-bundler.js:398
add FormsDragDropSimple.vue:96
callWithErrorHandling runtime-core.esm-bundler.js:6990
callWithAsyncErrorHandling runtime-core.esm-bundler.js:6999
invoker runtime-dom.esm-bundler.js:347
addEventListener runtime-dom.esm-bundler.js:297
patchEvent runtime-dom.esm-bundler.js:315
patchProp runtime-dom.esm-bundler.js:379
mountElement runtime-core.esm-bundler.js:4105
processElement runtime-core.esm-bundler.js:4068
patch runtime-core.esm-bundler.js:3988
componentUpdateFn runtime-core.esm-bundler.js:4536
run reactivity.esm-bundler.js:160
setupRenderEffect runtime-core.esm-bundler.js:4655
mountComponent runtime-core.esm-bundler.js:4438
processComponent runtime-core.esm-bundler.js:4396
patch runtime-core.esm-bundler.js:3991
mountChildren runtime-core.esm-bundler.js:4187
mountElement runtime-core.esm-bundler.js:4096
processElement runtime-core.esm-bundler.js:4068
patch runtime-core.esm-bundler.js:3988
mountChildren runtime-core.esm-bundler.js:4187
mountElement runtime-core.esm-bundler.js:4096
processElement runtime-core.esm-bundler.js:4068
patch runtime-core.esm-bundler.js:3988
mountChildren runtime-core.esm-bundler.js:4187
mountElement runtime-core.esm-bundler.js:4096
processElement runtime-core.esm-bundler.js:4068
patch runtime-core.esm-bundler.js:3988
componentUpdateFn runtime-core.esm-bundler.js:4536
run reactivity.esm-bundler.js:160
setupRenderEffect runtime-core.esm-bundler.js:4655
mountComponent runtime-core.esm-bundler.js:4438
runtime-dom.esm-bundler.js:10
I got this error several times when trying to fix my problem. However, the error remains the same.
Your reproduction is not minimal, please read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Most bugs should be reproducible with the SFC Playground.
Maybe you need to use markRaw()
(look it up in documentation)
Here when you get rid of whitespaces, the fragment
node that wraps the v-for
will also be deleted.
//exposed methods
set: function (el, lmddOptions) {
if (!el.lmdd) {
clean(el); //get rid of whitespaces <---------------
el.lmdd = true;
el.lmddOptions = assignOptions(options, lmddOptions); //create options object
el.addEventListener("mousedown", eventManager, false);
document.addEventListener("drag", muteEvent, false);
document.addEventListener("dragstart", muteEvent, false);
window.addEventListener("touchstart", simulateMouseEvent);
window.addEventListener("touchmove", simulateMouseEvent, {
passive: false
});
window.addEventListener("touchend", simulateMouseEvent);
}
},