CODEWITHSUNDEEP
vue.js
Desiigner
Desiigner

Reputation: 2336

Vue.js override mounted() method

So I've extended my component this way:

<template>
<qlist></qlist>
</template>

<script>
import QuestionList from '@/components/pages/questions/QuestionList'

export default {
  extends: QuestionList,
  components: {
    'qlist': QuestionList
  }
}
</script>

<style scoped>
</style>

How can I totally override mounted() method from my QuestionList component? I've noticed that when I define it in current component, I can add functionality to the mounted() method, but I'm not able to override the previous behaviour

Upvotes: 2

Views: 4214

Answers (1)

v-moe
v-moe

Reputation: 1443

Your component imports QuestionList to include it as an ELEMENT in the template, so whatever you have in the mounted() hook of QuestionList will be called, you cannot avoid it doing it this way. Use a mixin instead: put all the logic in there that should be the same in both the original component and the component that extends it and separately implement mounted() in each. By moving your mounted() hook logic to a method you could even use the custom merge options as described here: https://v2.vuejs.org/v2/guide/mixins.html but it's probably not necessary.

Upvotes: 2

Related Questions