fix: data() should be called with vm as first argument in mixins

fix #7191
vuejs · Dec 6, 2017 · bd4819e · bd4819e
1 parent 6eccd8e
commit bd4819e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/src/core/util/options.js b/src/core/util/options.js
@@ -85,18 +85,18 @@ export function mergeDataOrFn (
     // it has to be a function to pass previous merges.
     return function mergedDataFn () {
       return mergeData(
-        typeof childVal === 'function' ? childVal.call(this) : childVal,
-        typeof parentVal === 'function' ? parentVal.call(this) : parentVal
+        typeof childVal === 'function' ? childVal.call(this, this) : childVal,
+        typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal
       )
     }
   } else {
     return function mergedInstanceDataFn () {
       // instance merge
       const instanceData = typeof childVal === 'function'
-        ? childVal.call(vm)
+        ? childVal.call(vm, vm)
         : childVal
       const defaultData = typeof parentVal === 'function'
-        ? parentVal.call(vm)
+        ? parentVal.call(vm, vm)
         : parentVal
       if (instanceData) {
         return mergeData(instanceData, defaultData)

diff --git a/test/unit/features/options/data.spec.js b/test/unit/features/options/data.spec.js
@@ -107,7 +107,7 @@ describe('Options data', () => {
     expect(vm.a).toBe(1)
   })
 
-  it('should called with this', () => {
+  it('should be called with this', () => {
     const vm = new Vue({
       template: '<div><child></child></div>',
       provide: { foo: 1 },
@@ -123,4 +123,32 @@ describe('Options data', () => {
     }).$mount()
     expect(vm.$el.innerHTML).toBe('<span>foo:1</span>')
   })
+
+  it('should be called with vm as first argument when merged', () => {
+    const superComponent = {
+      data: ({ foo }) => ({ ext: 'ext:' + foo })
+    }
+    const mixins = [
+      {
+        data: ({ foo }) => ({ mixin1: 'm1:' + foo })
+      },
+      {
+        data: ({ foo }) => ({ mixin2: 'm2:' + foo })
+      }
+    ]
+    const vm = new Vue({
+      template: '<div><child></child></div>',
+      provide: { foo: 1 },
+      components: {
+        child: {
+          extends: superComponent,
+          mixins,
+          template: '<span>{{bar}}-{{ext}}-{{mixin1}}-{{mixin2}}</span>',
+          inject: ['foo'],
+          data: ({ foo }) => ({ bar: 'foo:' + foo })
+        }
+      }
+    }).$mount()
+    expect(vm.$el.innerHTML).toBe('<span>foo:1-ext:1-m1:1-m2:1</span>')
+  })
 })