[英]Update data using vue-resource
In my Vue component I have the following data:在我的 Vue 组件中,我有以下数据:
data() {
return {
revenueChart: '',
limit: 12,
labels: '',
datasets: ''
}
},
Also, there is one method that uses vue-resource to fetch the data:此外,还有一种使用vue-resource获取数据的方法:
fetchData() {
this.$http.get(this.url, {params: {limit: this.limit}}).then(function (response) {
this.labels = Object.keys(response.data);
this.datasets = Object.values(response.data);
});
},
As you can see, this method should update labels
and datasets
, but for some reason they are still empty strings ( ''
), they still have the default values.如您所见,此方法应该更新
labels
和datasets
,但由于某种原因它们仍然是空字符串( ''
),它们仍然具有默认值。
For example, I also have the following method that should use these data to generate a graph:例如,我还有以下方法应该使用这些数据来生成图表:
generateGraph() {
var data = {
labels: this.labels, // HERE
datasets: [
{
label: "Revenue",
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
data: this.datasets // AND HERE
}
]
};
var ctx = this.$refs.canvas.getContext('2d');
this.revenueChart = new Chart(ctx, {
type: 'line',
data: data
});
},
Finally:最后:
mounted() {
this.fetchData();
console.log(this.labels); // STILL EMPTY !
console.log(this.datasets); // STILL EMPTY !
this.generateGraph();
},
My graph is empty, after using the fetchData
method this.labels
and this.datasets
are still empty.我的图表是空的,使用
fetchData
方法后this.labels
和this.datasets
仍然是空的。
Here is the complete component:这是完整的组件:
<template>
<div>
<label>How Many Days?</label>
<select v-model="limit">
<option v-for="n in 12">{{ n }}</option>
</select>
<canvas ref="canvas"></canvas>
</div>
</template>
<script>
export default {
props: {
url: ''
},
data() {
return {
revenueChart: '',
limit: 12,
labels: '',
datasets: ''
}
},
mounted() {
this.fetchData();
console.log(this.labels); // STILL EMPTY !
console.log(this.datasets); // STILL EMPTY !
this.generateGraph();
},
methods: {
fetchData() {
this.$http.get(this.url, {params: {limit: this.limit}}).then(function (response) {
this.labels = Object.keys(response.data);
this.datasets = Object.values(response.data);
});
},
generateGraph() {
var data = {
labels: this.labels,
datasets: [
{
label: "Revenue",
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
data: this.datasets
}
]
};
var ctx = this.$refs.canvas.getContext('2d');
this.revenueChart = new Chart(ctx, {
type: 'line',
data: data
});
}
}
}
</script>
It seems that scope has been changed inside vue-resource
, due to which it is not updating vue
data variables, try following:似乎
vue-resource
内部的范围已更改,因此它没有更新vue
数据变量,请尝试以下操作:
fetchData() {
var self = this
this.$http.get(this.url, {params: {limit: this.limit}}).then(function (response) {
self.labels = Object.keys(response.data);
self.datasets = Object.values(response.data);
});
},
An alternate way can be to use this.$set
, as it is described in the documentation here .另一种方法是使用
this.$set
,如此处文档中所述。
fetchData() {
this.$http.get(this.url, {params: {limit: this.limit}}).then(function (response) {
this.$set(labels, Object.keys(response.data))
this.$set(datasets, Object.values(response.data))
});
},
mounted() {
this.fetchData();
console.log(this.labels); // STILL EMPTY !
console.log(this.datasets); // STILL EMPTY !
this.generateGraph();
},
You will not be able to see the data here, as fetchData
is an async function, so data will not be populated by the time these console log will be executed, but you can use these variables in the template, and they will render as soon as data is populated, or probably you can use nextTick as suggested in the comments to console log the data.您将无法在此处看到数据,因为
fetchData
是一个异步函数,因此在执行这些控制台日志时不会填充数据,但是您可以在模板中使用这些变量,它们会尽快呈现随着数据的填充,或者您可以按照评论中的建议使用nextTick来控制台记录数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.