ChartJS vue.js中v-show的回调

gv8xihay 于 2022-11-06 发布在 Chart.js

关注(0)|答案(3)|浏览(236)

有没有像on-showed和on-show这样使用vue.js的回调方法？
我在一个div元素上使用了v-show=“my-condition”，但是里面有一些charts.js图表，除非是可见的，否则无法呈现。
有谁知道如何只在父级可见时才呈现chart.js吗？它们位于可选选项卡内，因此可能会多次触发。
我用的是Vue.js和vue-strap。

chart.js

来源：https://stackoverflow.com/questions/34561921/callback-for-v-show-in-vue-js

3条答案

按热度按时间

pbossiut1#

看看this answer. -在类似的情况下，使用nextTick()对我很有效。

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

展开查看全部

赞(0）回复(0）举报 2022-11-06

jutyujz02#

没有你描述的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>