使用v-select中的选定周期参数更新谷歌图表

Question

我正在寻找一种更新谷歌条形图显示的方法通过从v-select中选择周期值。

到目前为止，最初，我的脚本已加载，调用"async created(("从REST API获取数据到MongoDB调用模块，并将返回的数据存储在posts[]中。最后保存到图表数据数组中。

数据格式类似于

类型

键
日期(YYYY-MM-DD(	字符串
success_count	int
failure_count	int

是的，

基本上，我们需要能够对selectedItem的更改做出响应。目前所有的加载都发生在创建的函数中，我们无法再次运行，因此步骤1是将创建的函数的主体移动或复制到一个新方法中，我们可以称之为load或其他什么方法。现在我们可以通过调用load来响应更改为selectedItem。

async created() {
await this.load();
},
components: {},
computed: {
theme() {
return this.$vuetify.theme.dark ? "dark" : "light";
}
},
methods: {
async load() {
try {
this.posts = await PostService.get_dashboard_Posts();
for (var i = 0; i < Object.keys(this.posts[0]).length; i++) {
this.chartData.push([`${this.posts[0][i]._id.year}-${this.posts[0] 
[i]._id.month}-${this.posts[0][i]._id.day}`, this.posts[0][i]._id.success_count, this.posts[0]
[i]._id.failure_count
])
}
} catch (err) {
this.error = err.message;
}
}
}

我们有几种方法可以应对变化，我将向您展示几种：

我们可以直接在模板中的输入元素上定义这种行为：

<v-select
v-model="selectedItem"
...
v-on:change="load(selectedItem.id)"                           
...
>
</v-select>

告诉vue对更改做出响应的另一种方法是使用观察者：

...
async created() {
await this.load();
},
watch: {
selectedItem(newValue) {
this.load(newValue.id);
// At the moment the watcher runs this.selectedItem is already 
// the newValue (this.selectedItem === newValue) so we could also
// do this:
this.load(this.selectedItem.id);
}
},
components: {},
...

最后一件我没有介绍的事情是将selectedItem.id提供给PostService.get_dashboard_Posts