Version

3.2.2

Reproduction link

https://github.com/vuejs/vue-next/commit/9d5fd33d6dadf3186f7979d811dedf092f3ddcb7

Steps to reproduce

toDisplayString({a: 1}) will fail TypeError: Cannot convert object to primitive value

What is expected?

toDisplayString({a: 1}) should output a display string

What is actually happening?

toDisplayString({a: 1}) fails because the object doesn't have toString implementation

The bug is caused by this PR: https://github.com/vuejs/vue-next/commit/9d5fd33d6dadf3186f7979d811dedf092f3ddcb7 And please take PRs seriously, especially Vue is a fundamental framework.

I tried it works fine and the test case passed. Could you provide a mini repro ? I might be missing something?

@edison1105 Sorry about the misleading example. I was tricked by the pitfall of Object:

Steps to reproduce

Taking the following vars as an example, toDisplayString will fail with "var", but will NOT fail with var "b". because "val" isn't inherited from Object meaning it doesn't have toString while "b" has. "val" works fine with JSON.stringify(val) but fails with String(val)

Solution

const toDisplayString = (val) => {
    return val == null
        ? ''
        : isArray(val) || (isObject(val) && (val.toString === objectToString || val.toString == null)) // Add "val.toString == null"
            ? JSON.stringify(val, replacer, 2)
            : String(val);
};