从api更新数据时如何自动刷新组件，无需页面刷新

Question

我正在尝试使组件像 LIKE 计数，

所以， 我有一个对象是我从 api 获得的名称 (LIST)，在我的 LIST 对象中有属性 total_like，默认值为 0，当我点击喜欢按钮时，我制作将请求发布到 api 并在 api 中我的 total_like 值上升到 1 和 2 等等。 在我看来，我正在用 {{item.total_like}} 显示点赞数，到目前为止一切正常。

问题是 item.total_like 值仅在我刷新页面时更新，但我想在不刷新页面的情况下显示此属性的新值。

我该如何解决？

问候

Answer 1

也许您可以使用事件修饰符来防止页面重新加载，示例是...

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

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

或者如果你想使用速记

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

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

希望这会有所帮助。