feat: support custom toString() in text interpolation and v-html (#8217)

close #8093

src/shared/util.js

@@ -85,7 +85,7 @@ export function isPromise (val: any): boolean {
 export function toString (val: any): string {
   return val == null
     ? ''
-    : typeof val === 'object'
+    : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
       ? JSON.stringify(val, null, 2)
       : String(val)
 }

test/unit/features/directives/html.spec.js

@@ -44,6 +44,12 @@ describe('Directive v-html', () => {
       vm.a = {}
     }).then(() => {
       expect(vm.$el.innerHTML).toBe('{}')
+      vm.a = { toString () { return 'foo' } }
+    }).then(() => {
+      expect(vm.$el.innerHTML).toBe('foo')
+      vm.a = { toJSON () { return { foo: 'bar' } } }
+    }).then(() => {
+      expect(vm.$el.innerHTML).toBe('{\n  "foo": "bar"\n}')
       vm.a = 123
     }).then(() => {
       expect(vm.$el.innerHTML).toBe('123')

test/unit/features/directives/text.spec.js

@@ -30,6 +30,12 @@ describe('Directive v-text', () => {
       vm.a = {}
     }).then(() => {
       expect(vm.$el.innerHTML).toBe('{}')
+      vm.a = { toString () { return 'foo' } }
+    }).then(() => {
+      expect(vm.$el.innerHTML).toBe('foo')
+      vm.a = { toJSON () { return { foo: 'bar' } } }
+    }).then(() => {
+      expect(vm.$el.innerHTML).toBe('{\n  "foo": "bar"\n}')
       vm.a = 123
     }).then(() => {
       expect(vm.$el.innerHTML).toBe('123')