Callback for v-show in vue.js

Question

Is there a callback method like on-show and on-show using vue.js?

I am using v-show = "my-condition" in a div element. But inside there are charts.js charts that cannot be displayed if they are not visible.

Does anyone know how to render chart.js only when the parent becomes visible? They are inside custom tabs, so they fire potentially several times.

I am using Vue.js and vue-strap.

Answer 1

Check out this answer - with help nextTick()worked for me in a similar situation. In a nutshell:

new Vue({
 ...

  data: {
    myCondition: false
  },

  watch: {
    myCondition: function () {
      if (this.myCondition) {
        this.$nextTick(function() {
          // show chart
        });
      } else {
        // hide chart
      }
    }
  },

  ...
})

Answer 2

event, .

computed :

new Vue({
  ...

  data: {
    myCondition: false
  },

  computed: {
    showChart: function () {
      if (this.myCondition) {
        // show chart
      } else {
        // hide chart
      }

      return this.myCondition
    }
  },

  ...
})


<div v-show="showChart"></div>

https://jsfiddle.net/xhfo24qx/

Answer 3

custom-directive

: fooobar.com/questions/6368220/...

: https://vuejs.org/v2/guide/custom-directive.html

Answer 4

: API Store , computed, .

becoz, computed, , .