[Vuejs]-Update google chart with selected period parameter from v-select

by

0👍

Yes that is possible,

Basically we need to be able to respond to changes to selectedItem. All the loading currently happens inside the created function, which we cannot run again, so step 1 would be to move or copy the body of the created function to a new method, which we may call load or something. Now we can respond to changed to selectedItem by calling load.

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;
        }
    }
}

There are a few ways we can respond to changes, i’ll show you a few:

We can define this behavior on the input element directly in the template:

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

Another way to tell vue to respond to changes is by using watchers:

...
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: {},
...

The last thing that I haven’t covered and leave up to you is to supply the selectedItem.id to PostService.get_dashboard_Posts

Leave a comment