javascript - Callback for v-show in vue.js - Stack Overflow

admin管理员组

文章数量:1221253

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

I'm using v-show="my-condition" on a div element. But inside are some charts.js charts, which cannot render unless visible.

Anyone know how can render the chart.js only when the parent is made visible? They are inside selectable tabs so it fires potentially multiple times.

I'm using Vue.js and vue-strap.

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

I'm using v-show="my-condition" on a div element. But inside are some charts.js charts, which cannot render unless visible.

Anyone know how can render the chart.js only when the parent is made visible? They are inside selectable tabs so it fires potentially multiple times.

I'm using Vue.js and vue-strap.

• javascript
• vue.js
• chart.js

Share Improve this question Follow asked Jan 2, 2016 at 2:06 Douglas RosebankDouglas Rosebank 1,83722 gold badges1414 silver badges1111 bronze badges 3

• If your condition is a single variable you could .$watch it and use the callback to render the tables. See the docs – JCOC611 Commented Jan 2, 2016 at 2:13
• You could also use v-if instead of v-show and use a directive on the element you are making into a chart so you don't need to worry about watching. – Bill Criswell Commented Jan 2, 2016 at 17:48
• Its just suggestion, if you want to call any API and Store on state change then don't use computed, use a watch. becoz if you use computed then it will call so many times and it will hang a browser. – code solution Commented Jul 21, 2019 at 4:56

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 7

Check out this answer - using 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
      }
    }
  },

  ...
})

There is no event that you describe.

However, you could use a computed property like this:

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/

custom-directive may archive this goals this goal

for example: https://stackoverflow.com/a/49737720/4896468

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

本文标签： javascriptCallback for vshow in vuejsStack Overflow