Question

用户可以输入他们的用户名，当他们按下按钮时，他们的统计数据将从此游戏的高分API中检索出来。在我的数据中，我有以下内容：

data () {
    return {
      skills: [[["Attack", 0], ["Hitpoints", 0], ["Mining", 0]], 
      [["Strength", 0], ["Agility", 0], ["Smithing", 0]],
      [["Defence", 0], ["Herblore", 0], ["Fishing", 0]],
      [["Ranged", 0], ["Thieving", 0], ["Cooking", 0]],
      [["Prayer", 0], ["Crafting", 0], ["Firemaking", 0]],
      [["Magic", 0], ["Fletching", 0], ["Woodcutting", 0]], 
      [["Runecrafting", 0], ["Slayer", 0], ["Farming", 0]], 
      [["Construction", 0], ["Hunter", 0], ["Overall", 0]]],
      selectedArr: [],
      username: "",
    }
},

这是一个以三行为单位存储统计数据的大数组。统计名称后跟他们在该特定技能中的经验数量。所以最初经验设置为0。

当用户输入用户名并点击按钮时，我会调用接下来的两个函数：

createurl: function() {
  const url = "http://services.runescape.com/m=hiscore_oldschool/index_lite.ws?player=" + this.username;
  this.getuserdata(url);
},
getuserdata: function(d) {
  let skillsArrCopy = this.skills;
  this.$http.post('http://localhost:8888/getuserdata.php', {url: d},
   {emulateJSON: true}).then(response => {
     const data = JSON.parse(response.bodyText);
     for(let i=0; i<skillsArrCopy.length; i++) {
       for(let j=0; j<3; j++) {
         skillsArrCopy[i][j][1] = parseInt(data[skillsArrCopy[i][j][0]]);
       }
     }
     this.skills = skillsArrCopy;
   });
}

这会调用一个返回统计信息并更新数组的php文件。我现在知道这个工作正常。我有vue开发工具，可以看到数组得到更新。即0更新用户的体验量。

我遇到的问题是，除非我执行其他操作，否则不会在页面上更新。例如单击stat（更改表中的颜色）。这是本节的html：

<table cellspacing="0">
    <tr v-for="(value, key) in skills">
      <td v-on:click="changeSelectedArr(value[0][0])" v-bind:class="{ selected: selectedArr.indexOf(value[0][0]) > -1 }">
        <img v-bind:src="geturl(value[0][0])"/>
        <div class="level">{{ skills[key][0][1] }}</div>
      </td>
      <td v-on:click="changeSelectedArr(value[1][0])" v-bind:class="{ selected: selectedArr.indexOf(value[1][0]) > -1 }">
        <img v-bind:src="geturl(value[1][0])"/>
        <div class="level">{{ skills[key][1][1] }}</div>
      </td>
      <td v-on:click="changeSelectedArr(value[2][0])" v-bind:class="{ selected: selectedArr.indexOf(value[2][0]) > -1 }">
        <img v-bind:src="geturl(value[2][0])"/>
        <div class="level">{{ skills[key][2][1] }}</div>
      </td>
    </tr>
</table>

因此数组正在更新，但它不会在页面上更新。它更新的唯一方法是，如果我做另一个动作（通过单击更改其颜色的表格单元格）。由于某种原因，这会触发更新。如何在数组执行时更新页面？

更改数组时Vue组件未更新

0 个答案: