vue class component inheritance, method from base class "is not a function"

user_3256489 0
Viewed 898

I'm trying to make class inheritance to avoid code redundancy when defining stories for storybook because I have a bunch of scenarios (stories) to cover with less/more data similarities. I'm using a vue-class-component approach with vue-property-decorator to define Component.

Here is an example :

//myStory.stories.ts file
import Vue from 'vue'
import {Component} from 'vue-property-decorator'
import {store} from 'path/to/stores'
import Vuex from 'vuex'

const BaseOptions = {
  components: {Component1, Component2},
  template: MyTemplate,
  store: new Vuex.Store<IRootState>(store)
}

class BaseClass extends Vue {
  public method1() {
    console.log("call from method 1")
  }
  // I want to customize many methods here in BaseClass: method2, method3, etc
}

// Story book page
export default {
  title: 'My/Page',
  // Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/,
}

// Defining storybook stories:
export const ScenarioOne = () => (
  @Component<any>(
    {
      ...BaseOptions,
      mounted() {
        this.method1()
      },
    }
  )
  class CurrentClass extends BaseClass {} // This isn't working >> error: _this4.method1 is not a function
)


export const ScenarioTwo = () => (
  @Component<any>(
    {
      ...BaseOptions,
      mounted() {
        this.method1()
      },
    }
  )
  class CurrentClass extends BaseClass {
    // If I redefine the method1(), it's working
    public method1() {
       console.log("call from method 1 (redefined)")
    }
  }
)

Why my scenarioOne cannot call the method1() while scenarioTwo could ?

vue-class-components storybook vuejs2 typescript inheritance
1 Answers

You have to define the base class as a @Component({}) too, and all of the classes in the inheritance chain, so:

import Vue from "vue";
import Component from "vue-class-component";

@Component({})
class BaseClass extends Vue {
}

@Component({})
class SubClass extends BaseClass {
}
user_94640540
Related