How auto refresh component when data updated from api, without page refresh

Question

I’m trying to make component like a LIKE count,

so, i have a object is name (LIST) which i get from api, in my LIST object have property total_like which default value is 0, when i click to like button i make post request to api and in api my total_like value rising to 1 and 2 and etc. in my view i’m displaying the like count with {{item.total_like}} everything work well to this point.

problem is item.total_like value updating only when i refresh the page, but i want to show new value of this property without refreshing page.

how can i figure out with it ?

regards

Answer 1

Maybe you can use the event modifiers to prevent page reloading, examples are...

<button type="submit" v-on:click.prevent="addLike" >

<button type="submit" v-on:submit.prevent="addLike">

or if you want to use the shorthand

<button type="submit" @click.prevent="addLike" >

<button type="submit" @submit.prevent="addLike">

Hope this helps.