Vue组件数组更新后未刷新问题及游戏API数据更新异常

Hey there! Let's tackle this common Vue reactivity issue you're facing. When you fetch data from your PHP API and update that stats array, your component isn't updating—this usually boils down to how Vue tracks changes to arrays. Let's break down the problem and fix it step by step.

Why This Happens #

Vue's reactivity system has specific rules for detecting changes in arrays. It can't automatically detect these operations:

• Directly modifying an array element by index (e.g., this.stats[0][1] = 500)
• Changing the array's length directly (e.g., this.stats.length = 0)

If you're using either of these to update your [技能名称, 经验值] pairs, Vue won't trigger a re-render of your component.

Solutions That Work #

Let's go through the most reliable ways to update your stats array and make sure Vue picks up the changes.

1. Use this.$set to Update Nested Values #

Since your stats are stored as a 2D array (each item is a [skill, experience] pair), you need to tell Vue explicitly when you update the experience value in a nested array.

Here's how to adjust your fetch method:

methods: {
  fetchStats() {
    // Call your PHP endpoint (using fetch example)
    fetch(`your-php-file.php?username=${this.username}`)
      .then(response => response.json())
      .then(apiData => {
        // Assume apiData returns an array like [{skill: 'Sword', exp: 1200}, ...]
        apiData.forEach((item, index) => {
          // Use this.$set to update the experience value in the existing pair
          this.$set(this.stats[index], 1, item.exp);
        });
      });
  }
}

this.$set ensures Vue registers the change and triggers a component re-render.

2. Replace the Entire Array with a New Reference #

Vue will detect when you replace the original array with a brand new array (since it watches for changes to the array's reference). This is great if your API returns a full set of stats that matches your structure:

methods: {
  fetchStats() {
    fetch(`your-php-file.php?username=${this.username}`)
      .then(response => response.json())
      .then(apiData => {
        // Map the API data to your [skill, experience] format and assign to a new array
        this.stats = apiData.map(item => [item.skill, item.exp]);
      });
  }
}

By creating a new array with map, you're giving Vue a new reference to watch, so it'll immediately update the component.

3. Use Array Mutation Methods #

Vue wraps standard array methods like splice, push, pop, sort, and reverse to trigger reactivity. If you need to add/remove stats or reorder them, use these methods instead of direct index changes:

// Example: Replace all existing stats with new ones using splice
this.stats.splice(0, this.stats.length, ...newStatsArray);

// Example: Add a new skill-experience pair
this.stats.push(['Archery', 0]);

Quick Debugging Check #

Before diving into fixes, confirm two things:

1. Your PHP endpoint is returning the correct data (check the network tab in your browser dev tools).
2. The this.stats array is actually being updated (log it with console.log(this.stats) right after your API call).

If the data is correct but the view isn't updating, the reactivity issue is definitely the culprit.

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