Element: Property or method toJSON is not defined on the instance but referenced during render

[cili93]

gist with example html: https://gist.github.com/cili93/e75433714ecad7390eb1b7476532e09d

This error was showing up for el-select, then I moved to el-dropdown and it stopped showing up. Now it's showing up again, for el-dropdown this time.
Could you PLEASE tell me why in the world is it showing up and where is the problem ?

It shows whenever I click on dropdown or dropdown item

[Leopoldthecoder]

Please search your project for toJSON

[cili93]

Oh I did, 0 matches my friend
All of them are in node modules, nothing in project itself

[Leopoldthecoder]

I couldn't reproduce your problem with the gist you provided. Could you write an online demo using jsfiddle?

[cili93]

I can't believe there's isn't like a hundred people with this problem, me and two more colleagues are having the same issue
I'll try to create a demo today, thank you

[cili93]

Now it's working like a glove, I guess somebody changed something and fixed it without even knowing
We had a lot of problems with this earlier but some stars matched and now it's working as it should I guess
I'll close the issue for now, if it appears again I'll try to make a fiddle and reproduce it somehow

Thanks for wanting to help guys, I appreciate it 👍 👨

[Leopoldthecoder]

No problem. Tell us if this happens again.

[voveson]

I am also seeing this error on both el-tabs and el-collapse. It shows up pretty inconsistently and I haven't been able to pinpoint what conditions cause it to occur. @cili93, have you seen this showing up anymore?

[DragWeb]

when i click the button open dialog ,show the same problem Property or method "toJSON" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
i dont know why

[earlymeme]

Maybe because of the vue-dev-tool plugin for chrome... for example
option.vue beforeDestroy: function beforeDestroy() { this.dispatch('ElSelect', 'onOptionDestroy', this); }
such this payload will be recorded by vue dev tool.But this has no toJSON method.

[rDr4g0n]

@earlymeme is right. I disabled vue-devtools in chrome and the warning went away. Re-enabling vue devtools, and restarting chrome dev tools brings the warning back.

Another way to repro:
1) navigate to the page where the warning occurs
2) if chrome dev tools is already open, close it and refresh the page (this ensures vue devtools is unloaded)
3) open chrome dev tools (do NOT go to the vue devtools tab)
4) interact with the elementui control that causes the warnings
5) note that there are no warnings
6) go to the vue devtools tab in chrome dev tools
7) interact with the elementui control that causes the warnings
8) not that the warnings appear in the console now

Clearly vue devtools is triggering these warnings, but is the bug that vue devtools is doing something it shouldn't or is the fix for elementui to provide some additional property or method to make it more easily debuggable by vue devtools?

[edit] Looks like there is a recent issue about this on the vue devtools repo.

[edit edit] I have created an issue about how this "toJSON" warning can actually end up blocking the main execution thread.

[onergang]

In my project, I opened the console, by this

window.vConsole = new VConsole();

but when I commented it. It works, the Vue warn was disappeared.

[wanxue0804]

In my project, I opened the console, by this

window.vConsole = new VConsole();

but when I commented it. It works, the Vue warn was disappeared.

thank you very much that solve my same problem

[mqliutie]

If the model director was set this the warning will be shown.