时间戳

首页 > 解决方案 > VueJS提交延迟导致数据错误

javascript - VueJS提交延迟导致数据错误

问题描述

我的 Vue 实例中有一个方法可以更新并从我的数据库中删除一个值。提交方法后，值会正确更新，但我需要在从前端删除值之前进行刷新。下面是我的方法：

 async winBet(id, amount, bet) {
      try {
        this.bet.id = id
        this.bet.amount = amount
        this.bet.bet = bet
        await this.$http.post("/user/winBet", this.bet);
      } catch (err) {
        console.log(err)
      }
    },


<form @submit="winBet(value._id, value.amount, value.bet)">
  <button type="submit">Won</button>
</form>

我渲染列表，提交后不应该包含提交的元素，如下方式

<ul v-for="value in pendingBets">
  <li>Bet: {{value}}</li>
</ul>

________________________________________________________________
mounted() {
    fetch('http://localhost:4000/user/getUser', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        'email': this.myval.email
      }),
    })
        .then(function (response) {
          return response.json();
        }).then(function (data) {
      this.pendingBets = data[0].allBets
    }.bind(this));
    }

出于某种原因，我需要在从“pendingBets”中删除值之前进行刷新。有时它有效，有时我必须进行刷新。我还是 Vue 的新手，所以希望有人可以在这里向我指出正确的方向。先感谢您。

标签： javascriptvue.jsrenderinglifecycle

解决方案

我想出的解决方案是用一个短的 setInterval 实现一个 window.location.reload()。

推荐阅读