How to call a component method each time this component show in vue2?-CodePudding

Vue component hasn't onShow lifecycle method.

How to call a component method each time this component show in vue2?

CodePudding user response：

I have used this library for that purpose before:

https://github.com/Akryum/vue-observe-visibility

CodePudding user response：

I am assuming you are dynamically hiding and showing the component and you want to trigger few functionality every time component show. If Yes, You can simply achieve this requirement by using v-if directive instead of v-show. As v-if will rebuild the component every time condition got passed.

Live Demo :

Vue.component('child', {
  props: ['childmsg'],
  template: '<p>{{ childmsg }}</p>',
  mounted() {
    console.log('child component mounted');
  }
});

var app = new Vue({
  el: '#app',
  data: {
    buttonMsg: 'Show Child Component',
    showChild: false
  },
  methods: {
    toggleBtn() {
      this.showChild = !this.showChild;
      this.buttonMsg = this.showChild ? 'Hide Child Component' : 'Show Child Component';
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="toggleBtn">{{ buttonMsg }}</button>
  <child v-if="showChild" childmsg="This is a child message"/>
</div>