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

Posted 2023-02-23

【中文标题】从api更新数据时如何自动刷新组件，无需页面刷新

【英文标题】：How auto refresh component when data updated from api, without page refresh

【发布时间】：2018-10-08 23:03:08

【问题描述】：

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

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

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

我该如何解决？

问候

【问题讨论】：

可能正在寻找 ajax。

可能是反应性问题，请提供代码示例以便我们帮助您找出问题所在

【参考方案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">

希望这会有所帮助。