-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use toString() on object interpolation when defined #8093
Comments
Just stumbled upon this myself found the culprit here: https://github.com/vuejs/vue/blob/dev/src/shared/util.js#L81 Would be nice if it can execute the object's |
I think |
In this case we’re representing an object as a string, which is what toString is made for. I believe JSON.stringify is only used to make prettier outputs or Object and Array when they have no nice toString formatting. We might get around this by checking if the object’s toString method is the last in the prototype chain. This way we can use toString if we added it to the prototype ourselves |
export function toString (val: any): string {
return val == null
? ''
: typeof val !== 'object'
? String(val)
: val.toString() === _toString.call({})
? val.toString()
: JSON.stringify(val, null, 2)
} Is it right? It is just checking with Object's toString and parameter Object's toString. |
@01045972746 With my comprehension of this, it looks good, thanks! |
@mathieutu Umm.. i have tested it, but it is failed because of Like this, SUMMARY:
✔ 1096 tests completed
✖ 2 tests failed
FAILED TESTS:
Directive v-html
✖ should support all value types
PhantomJS 2.1.1 (Linux 0.0.0)
Expected '' to be '[]'.
webpack:///test/unit/features/directives/html.spec.js:43:36 <- index.js:169041:36
shift@webpack:///test/helpers/wait-for-update.js:24:32 <- index.js:102129:36
webpack:///src/core/util/next-tick.js:95:16 <- index.js:75156:16
flushCallbacks@webpack:///src/core/util/next-tick.js:16:4 <- index.js:75048:14
Directive v-text
✖ should support all value types
PhantomJS 2.1.1 (Linux 0.0.0)
Expected '' to be '[]'.
webpack:///test/unit/features/directives/text.spec.js:29:36 <- index.js:173023:36
shift@webpack:///test/helpers/wait-for-update.js:24:32 <- index.js:102129:36
webpack:///src/core/util/next-tick.js:95:16 <- index.js:75156:16
flushCallbacks@webpack:///src/core/util/next-tick.js:16:4 <- index.js:75048:14 We have to make it more elaborate! |
I’ll take a look when I get the time. Most likely next monday |
Hey guys, I've took time to work on it this night. |
@mathieutu looks good, but what about using something like: export function toString (val: any): string {
return val == null
? ''
: typeof val === 'object' && Object.getPrototypeOf(val).toString === val.toString
? JSON.stringify(val, null, 2)
: String(val)
} It checks if the |
Actually I'm kind of already doing this. I don't compare values but function references : val.toString === _toString _toString is defined here: https://github.com/mathieutu/vue/blob/d2f10269ee274703c43051d6ee98c2177f0a2ec0/src/shared/util.js#L48 The only difference is that I check before if the value is a plain object. This is the only place where a value is used, but I can't say anything in term of performance about it. |
@mathieutu ah, didn't know it was used that way, awesome. Then maybe the isPlainObject check is not needed? Or maybe move it as the last check? We could do some performance testing for it. |
Ok, I've tested your solution with a more complicated test, and it doesn't work. If you test with a value like The |
@mathieutu If I use the |
@mathieutu Hmmm, same happens if I compare to |
@Gaya I don't have the time right now to explain everything, so I let you play with the unit tests (test with arrays avoiding, and not). And you can't really count on |
I don't know where we stand on this request (which I support), but JS make an extensive use of coercion, and when needing a string it call for I think this is the proper way to go, just ask for a coercion with |
@elmatou This was merged in core last year, so it should work pretty well now! |
Version
2.5.16
Reproduction link
Steps to reproduce
When interpoling a object, it uses the
JSON.stringify
method instead oftoString
, which is normally the proper method to set a way to convert an object to a string. We could try to see if thetoString
method is present before calling thetoJSON
one ?What is expected?
In the fiddle:
What is actually happening?
In the fiddle:
Thanks.
The text was updated successfully, but these errors were encountered: