VueJS提交操作后前端数据不同步需手动刷新问题求助

Hey there! Let's break down why your pendingBets list isn't updating automatically after submitting the winBet form, and how to fix it.

The Root Cause #

Right now, your winBet method only sends a request to update the database—but it doesn't update the local pendingBets array that powers your list. Vue's reactive system only re-renders the page when the underlying data changes. Since you're not modifying pendingBets after the API call, the page stays stuck with the old data until you refresh (which triggers the mounted hook to re-fetch the list). The occasional "normal" behavior you see is probably a fluke from other unintended data updates.

Solutions to Try #

Option 1: Manually Remove the Item After Success (No Backend Changes Needed)

Since you know the _id of the bet you're updating, you can filter it out of pendingBets right after the API call succeeds. This is quick and avoids extra requests:

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);
    // Filter out the bet that was just processed
    this.pendingBets = this.pendingBets.filter(item => item._id !== id);
  } catch (err) {
    console.log(err)
  }
},

Vue will detect the new array reference and automatically re-render the list.

Option 2: Fetch Updated Data from the Backend

If you prefer to get the latest state directly from your database (good for cases where multiple users might be modifying the same data), refactor your data-fetching logic into a reusable method and call it after the winBet request:

First, create a reusable fetch method:

async fetchPendingBets() {
  try {
    const response = await fetch('http://localhost:4000/user/getUser', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ 'email': this.myval.email }),
    });
    const data = await response.json();
    this.pendingBets = data[0].allBets;
  } catch (err) {
    console.log(err);
  }
}

Update your mounted hook to use this method:

mounted() {
  this.fetchPendingBets();
}

Then call it in winBet:

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);
    // Refresh the list with updated data
    await this.fetchPendingBets();
  } catch (err) {
    console.log(err)
  }
},

Option 3: Return Updated Data from the Backend (Most Efficient)

If you control the backend code, modify the /user/winBet endpoint to return the updated allBets list. Then you can directly replace your local array:

async winBet(id, amount, bet) {
  try {
    this.bet.id = id
    this.bet.amount = amount
    this.bet.bet = bet
    // Assume the backend returns the updated allBets array in response.data
    const response = await this.$http.post("/user/winBet", this.bet);
    this.pendingBets = response.data.updatedAllBets;
  } catch (err) {
    console.log(err)
  }
},

This avoids extra API calls and ensures your local state matches the database perfectly.

Any of these options will fix the manual refresh issue and make your list update immediately after submission!

内容的提问来源于stack exchange，提问作者egx