Watch newValue, oldValue from Angular to Vue - arrays

Question

Im converting a site from php and Angular to Vue Im pretty new to both but I'm 99% done. I need to watch when the data changes. its basically a league table and when some one goes up it css they go green when they go down css they go red. Ive tried converting the Angular function here
$scope.$watch(function () {
return $scope.scores;
},
function(newVal, oldVal) {
angular.forEach(newVal, function(value1, key1) {
angular.forEach(oldVal, function(value2, key2) {
if (value1.id === value2.id) {
if (key1 < key2) {
value1.posChang = 'up';
} else if (key1 > key2) {
value1.posChang = 'down';
}
}
});
});
}, true);
and convert to vue here
watch: {
scores: {
immediate: true,
handler (newValue, oldValue) {
console.log(newValue)
console.log(oldValue)
this.newValue.forEach(newValue, function (value1, key1) {
this.oldValue.forEach(oldValue, function (value2, key2) {
if (value1.id === value2.id) {
if (key1 < key2) {
value1.posChang = 'up';
} else if (key1 > key2) {
value1.posChang = 'down';
}
}
});
});
},
deep: true
}
},
it console prints both Old and New but it crashes when it hits the forEach
any help would be great
as requested the whole file :-
<template>
<div id="rScore">
<div class="title">
<h2>{{ data.full_name }} - {{ data.round_head }}</h2>
<br />
<p>
{{ data.course_dates }}
</p>
</div>
<table>
<thead>
<tr class="title" v-if="this.roundsPlayed > 1">
<th :class="cell">
Pos
</th>
<th :class="cell">
Player Name
</th>
<th :class="cell">
Nat.
</th>
<th :class="cell">
Par
</th>
<th
v-for="(i, roundIt) in range(1, roundsPlayed)"
:key="roundIt"
:class="cell"
>
R{{ i }}
</th>
<th :class="cell">
Score
</th>
</tr>
<tr v-else>
<th :class="cell">
Pos
</th>
<th :class="cell">
Player Name
</th>
<th :class="cell">
Nat.
</th>
<th :class="cell">
Par
</th>
<th :class="cell">
Score
</th>
</tr>
</thead>
<tbody v-if="this.roundsPlayed > 1">
<template v-for="(scores, index) in scores">
<tr #click.stop="rowClicked(index)" :key="index + Math.random()">
<td :class="cell">
{{ scores.pos }}
</td>
<td #click="playerCard" :title="scores.member_no" :class="cell">
{{ scores.name }}
</td>
<td :class="cell" :title="scores.nationality">
<span>
<img
:class="flag"
:src="
('https://assets.ocs-sport.com/flags/svg/flag_' +
scores.nationality)
| lowercase
"
/>
</span>
</td>
<td v-if="scores.vspar < 0" :class="[up, cell]">
{{ scores.vspar }}
</td>
<td v-else-if="scores.vspar > 0" :class="[down, cell]">
{{ scores.vspar }}
</td>
<td v-else :class="cell">
{{scores.vspar}}
</td>
<td :class="cell">
<span v-if="scores.vspar_R1 < 0" :class="[up, cell]">
{{ scores.score_R1 }}
</span>
<span v-else-if="scores.vspar_R1 > 0" :class="[down, cell]">
{{ scores.score_R1 }}
</span>
<span v-else :class="cell">
{{ scores.score_R1 }}
</span>
</td>
<td v-if="roundsPlayed > 1" :class="cell">
{{ scores.score_R2 }}
</td>
<td v-if="roundsPlayed > 2" :class="cell">
{{ scores.score_R3 }}
</td>
<td v-if="roundsPlayed > 3" :class="cell">
{{ scores.score_R4 }}
</td>
<td v-if="roundsPlayed > 4" :class="cell">
{{ scores.score_R5 }}
</td>
<td v-if="roundsPlayed > 5" :class="cell">
{{ scores.score_R6 }}
</td>
<td v-if="roundsPlayed > 6" :class="cell">
{{ scores.score_R7 }}
</td>
<td v-else :class="cell">
{{ scores.score }}
</td>
</tr>
<tr
#click.stop="rowClicked(rowClicked === -1)"
v-if="index === clickedRow"
class="tr-kids"
:key="index + Math.random()"
>
<b-row>
<b-col>
<table :class="tableRow">
<thead>
<tr class="titleReport">
<th :class="cellReport">
Hole
</th>
<th :class="cellReport">
1
</th>
<th :class="cellReport">
2
</th>
<th :class="cellReport">
3
</th>
<th :class="cellReport">
4
</th>
<th :class="cellReport">
5
</th>
<th :class="cellReport">
6
</th>
<th :class="cellReport">
7
</th>
<th :class="cellReport">
8
</th>
<th :class="cellReport">
9
</th>
<th :class="cellReport">
OUT
</th>
</tr>
</thead>
<tbody>
<tr class="titleReport">
<td :class="cellReport">
Yards
</td>
<td
:class="cellReport"
v-for="number in playerCardData.course_length_yards
.split(',')
.slice(0, 9)"
:key="number"
>
{{ number }}
</td>
<td :class="cellReport">
{{ playerCardData.course_out_length.slice(1, 6) }}
</td>
</tr>
<tr class="titleReport">
<td :class="cellReport">
Par
</td>
<td
:class="cellReport"
v-for="number in playerCardData.course_par
.split(',')
.slice(0, 9)"
:key="number"
>
{{ number }}
</td>
<td :class="cellReport">
{{ playerCardData.course_out_par.slice(1, 5) }}
</td>
</tr>
<tr
v-for="(i, roundIt1) in range(1, roundsPlayed)"
:key="roundIt1"
:class="cellReport"
>
<td>R{{ i }}</td>
<template v-if="i === 1">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R1
.split(',')
.slice(0, 10)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 2">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R2
.split(',')
.slice(0, 10)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 3">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R3
.split(',')
.slice(0, 10)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 4">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R4
.split(',')
.slice(0, 10)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 5">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R5
.split(',')
.slice(0, 10)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 6">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R6
.split(',')
.slice(0, 9)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 7">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R7
.split(',')
.slice(0, 9)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
</tr>
</tbody>
</table>
</b-col>
<b-col>
<table :class="tableRow">
<thead>
<tr class="titleReport">
<th :class="cellReport">
10
</th>
<th :class="cellReport">
11
</th>
<th :class="cellReport">
12
</th>
<th :class="cellReport">
13
</th>
<th :class="cellReport">
14
</th>
<th :class="cellReport">
15
</th>
<th :class="cellReport">
16
</th>
<th :class="cellReport">
17
</th>
<th :class="cellReport">
18
</th>
<th :class="cellReport">
IN
</th>
<th :class="cellReport">
TOT
</th>
</tr>
</thead>
<tbody>
<tr class="titleReport">
<td
:class="cellReport"
v-for="number in playerCardData.course_length_yards
.split(',')
.slice(9, 18)"
:key="number"
>
{{ number }}
</td>
<td :class="cellReport">
{{ playerCardData.course_in_length.slice(1, 6) }}
</td>
<td :class="cellReport">
{{ playerCardData.course_total_length.slice(1, 6) }}
</td>
</tr>
<tr class="titleReport">
<td
:class="cellReport"
v-for="number in playerCardData.course_par
.split(',')
.slice(9, 18)"
:key="number"
>
{{ number }}
</td>
<td :class="cellReport">
{{ playerCardData.course_in_par.slice(1, 5) }}
</td>
<td :class="cellReport">
{{ playerCardData.course_total_par.slice(1, 5) }}
</td>
</tr>
<tr
v-for="(i, roundIt2) in range(1, roundsPlayed)"
:key="roundIt2"
:class="cellReport"
>
<template v-if="i === 1">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R1
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 2">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R2
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 3">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R3
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 4">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R4
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 5">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R5
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 6">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R6
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 7">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R7
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
</tr>
</tbody>
</table>
</b-col>
</b-row>
</tr>
</template>
</tbody>
<tbody v-else>
<tr v-for="(scores, index) in scores" :key="index">
<td :class="cell">
{{ scores.pos }}
</td>
<td :class="{ up: scores.posChang === 'up', down: scores.posChang === 'down' }" >
{{ scores.name }}
</td>
<td :class="cell" :title="scores.nationality">
<span>
<img
:class="flag"
:src="
('https://assets.ocs-sport.com/flags/svg/flag_' +
scores.nationality)
| lowercase
"
/>
</span>
</td>
<td v-if="scores.vspar < 0" :class="[cell, up]">
{{ scores.vspar }}
</td>
<td v-else-if="scores.vspar > 0" :class='[cell, down]'>
{{scores.vspar}}
</td>
<td v-else :class="cell">
{{scores.vspar}}
</td>
<td v-if="scores.vspar < 0" :class="[cell, up]">
{{ scores.score }}
</td>
<td v-else-if="scores.vspar > 0" :class='[cell, down]'>
{{scores.score}}
</td>
<td v-else :class="cell">
{{scores.score}}
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "rScore",
props: ["data", "home", "scores"],
data() {
return {
cell: "cell",
cellReport: "cellReport",
flag: "flag",
title: "title",
tableRow: "tableRow",
clickedRow: -1,
courseData: this.data,
cardID: [],
playerCardData: [],
id: this.$route.query.id,
code: this.$route.query.code,
up:'up',
down:'down'
};
},
methods: {
range: function(start, end) {
if (this.roundsPlayed === 1) return this.roundsPlayed;
else
return Array(end - start + 1)
.fill()
.map((_, idx) => start + idx);
},
rowClicked: function(index) {
this.clickedRow = index;
},
playerCard: function(event) {
var cardID = event.target.getAttribute("title");
return (
(this.cardID = cardID),
axios
.get(
" url" +
this.id +
"/" +
this.id +
"-" +
this.code +
"-cards-" +
this.cardID +
".json?randomadd=1613462964358"
)
.then((response) => (this.playerCardData = response.data))
);
},
},
watch: {
scores: {
immediate: true,
handler (newValue, oldValue) {
console.log(newValue)
console.log(oldValue)
newValue.forEach(newValue, function (value1, key1) {
oldValue.forEach(oldValue, function (value2, key2) {
if (value1.id === value2.id) {
if (key1 < key2) {
value1.posChang = 'up';
} else if (key1 > key2) {
value1.posChang = 'down';
}
}
});
});
},
deep: true
}
},
computed: {
roundsPlayed() {
return this.data.rounds_played;
},
},
filters: {
lowercase: function(value) {
if (!value) {
return "";
}
return value.toLowerCase() + ".svg";
},
},
};
</script>
<style scoped>
.cell {
width: 10%;
text-align: center;
}
.cellReport {
width: 10%;
text-align: center;
}
.tableRow {
width: 100%;
}
.flag {
width: 7%;
}
.row {
padding-top: 10%;
padding-bottom: 10%;
width: 405%;
padding-left: 20%;
background-color: white;
}
.col {
padding-left: 0;
padding-right: 0;
}
.title {
text-align: center;
background-color: #263056;
color: white;
}
.titleReport {
background-color: #1b509b !important;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.up{
color: #A52A2A;
}
.down{
color: #1E90FF;
}
</style>

Answer 1

Remove this. from newValue and oldValue

Answer 2

Took Mi-Creativity code pen above and modified as it was making everyone the same
this now works perfect. thanks for the help
watch: {
score: {
immediate: true,
handler(newValue, oldValue) {
newValue.forEach((value1, key1) => {
oldValue.forEach((value2, key2) => {
if (value1.id === value2.id) {
if(key1 < key2){
value1.posChang = 'up';
} else if (key1 > key2) {
value1.posChang = 'down';
}
}
});
});
console.log(newValue);
},
deep: true,
},
},