在vue.js中回调v-show

Question

是否有使用vue.js的on-shown和on-show等回调方法？

我在div元素上使用v-show ="my-condition".但内部是一些chart.js图表​​,除非可见,否则无法呈现.

任何人都知道如何在父母可见的情况下渲染chart.js？它们位于可选标签内,因此可能会多次触发.

我正在使用Vue.js和vue-strap.

Answer 1

看看这个答案-nextTick()在类似的情况下使用对我有用。简而言之：

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/