我是第一次使用vue.js和vue-chartjs。在简化的代码示例中,我想通过按下add Label按钮向图表添加标签,但图表没有更新。我的代码基于this教程。我尝试从子组件调用render方法,但不起作用。
vue.js
vue-chartjs
add Label
render
我期望当我单击add Label按钮时,标签13将添加到图表中。
13
c8ib6hqw1#
对我有帮助的是添加了一个v-if="loaded",在更改之前将其设置为false,然后在更改之后将其设置为false。
v-if="loaded"
false
zzzyeukh2#
您的代码中有几个错误。首先,如果您想从子组件调用一个方法,您必须使用特殊属性ref。请查看有关ref的更多信息。因此,在您的程式码中,它应该是:
ref
<template> ... <chart ref='chart' :chart-data="datacollection"></chart> ... </template> <script> ... this.$refs.chart.render() // Not Chart.render() ... </script>
第二,你有一个错字在你的Chart.js:
this.chartData // Not this.chartdata
所以这意味着你在mounted中的render方法不起作用,也是不必要的。你的图表已经在你设置chartData属性后由reactiveProp绘制了。但不幸的是:
mounted
chartData
reactiveProp
this.datacollection.labels.push(13);
仍然不工作。如果你看这里的源代码,你会看到这个库只在chartData上使用watcher。这意味着如果你改变整个chartData,这将工作得很好(因为它在第一次绘制时工作)。请查看更多关于watcher的信息。因此,如果您希望依赖reactiveProp,则在您希望更新labels时,应设置:
labels
this.datacollection = { ...this.datacollection, labels: this.datacollection.labels.concat(13) // avoid to mutate data }
2条答案
按热度按时间c8ib6hqw1#
对我有帮助的是添加了一个
v-if="loaded"
,在更改之前将其设置为false
,然后在更改之后将其设置为false
。zzzyeukh2#
您的代码中有几个错误。首先,如果您想从子组件调用一个方法,您必须使用特殊属性
ref
。请查看有关ref的更多信息。因此,在您的程式码中,它应该是:
第二,你有一个错字在你的Chart.js:
所以这意味着你在
mounted
中的render
方法不起作用,也是不必要的。你的图表已经在你设置chartData
属性后由reactiveProp
绘制了。但不幸的是:
仍然不工作。如果你看这里的源代码,你会看到这个库只在
chartData
上使用watcher。这意味着如果你改变整个chartData
,这将工作得很好(因为它在第一次绘制时工作)。请查看更多关于watcher的信息。因此,如果您希望依赖
reactiveProp
,则在您希望更新labels
时,应设置: