Currently facing an issue while trying to connect a dynamically updating array of objects to a Konva circle. The circles are appearing as expected, but the problem arises within a for loop where I update player locations based on a "tick". While setting the array[index].x value to a specific number, console.log shows proper updates. However, when logging the entire array, it only displays the final calculated value from the loop.
The players array is initialized in the following manner:
export default {
data() {
return {
roundNumber: 1,
players: [],
Player values are pushed during setup for each player in the JSON file like this:
let tempObj = round.teamCT[id]
tempObj.x = 0;
tempObj.y = 0;
tempObj.team = "CT";
this.players.push(tempObj)
Here's how I'm updating the values:
console.log(this.players);
console.log(this.players[index]);
this.players[index]['x'] = (x-info.x0)*k/info.scale;
this.players[index]['y'] = (info.y0-y)*k/info.scale;
console.log(this.players);
console.log(this.players[index]);
A screenshot illustrates the difference between the array as a whole and array[index]:
I've attempted adding a watch on the entire array, which only toggled once and not after every update. Research led me to Vue.set, but it has been removed in Vue3 and doesn't seem to be the ideal solution.
Any assistance would be greatly appreciated!