Templates do not use toString() on objects
Version
3.1.1
Reproduction link
Steps to reproduce
- Render an object in a template that has a non-default toString() method
What is expected?
In Vue 2, the template would render with the result of calling toString() on the object.
It would check if the object's toString property was different from Object.toString.
https://github.com/vuejs/vue/blob/dev/src/shared/util.js#L81
What is actually happening?
In Vue 3.1.1, the template renders with the result of running JSON.stringify on the object.
It only checks that it's working with an object.
https://github.com/vuejs/vue-next/blob/master/packages/shared/src/toDisplayString.ts
This feels like a breaking change, but I don't see it listed anywhere. Confusingly, however, I've also seen zero people talking about this being a problem!
Obviously, I can just call .toString() everywhere that I was relying on this behavior, but that's a bit tedious.
1
Confusingly, however, I've also seen zero people talking about this being a problem!
I personally only every "dumped" objects in interpolations for debugging. I've never seen toString() being used in that way anywhere. I know it exists, but you are kind of the first person I learn of that relies on this behavior.
That may be just me, of course, but to me it seems this is kind of a niche thing to do, which might explain why it's not being talked about.
That being said, I would think it makes sense to implement the Vue 2 behavior in the sense of a fix. I personally don't think this was an intentional breaking change with a big reason behind it.
Yeah, I had a feeling it wasn't very common practice.
I (ab)used the behavior almost exclusively with a language system I'd developed for a game. The vast majority of the usage is in string interpolation, so it's not like too many things broke. It just made for quite a mess when I first got the project to compile, haha :p
As a workaround, you can use a regular function.
The relevant commit in Vue 2 was https://github.com/vuejs/vue/commit/0e4e45ec741416e0042c29a53bbc0e58c8663f6e
The fix from Vue 2 was retained in Vue 3 at first, and was also proposed to be retained in #1100, but was (accidentally?) removed in 3c60d40827f65cbff024cfda4bb981a742bb83a7. I've submitted a pull request to put the old behavior back