从 Angular 到 Vue 观看 newValue、oldValue答案

【问题标题】：Watch newValue, oldValue from Angular to Vue从 Angular 到 Vue 观看 newValue、oldValue
【发布时间】：2021-06-09 06:23:52
【问题描述】：

我正在将一个网站从 php 和 Angular 转换为 Vue 我对两者都很陌生，但我已经完成了 99%。我需要观察数据何时发生变化。它基本上是一个排行榜，当有人上去css时，他们会变绿，而当css下降时，他们会变红。我试过在这里转换 Angular 函数


       $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);

并在此处转换为 vue


   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
    }
  },

它的控制台同时打印旧的和新的，但是当它碰到 forEach 时它会崩溃

任何帮助都会很棒

根据要求提供整个文件：-

<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>

【问题讨论】：

你为什么在newValue.forEach(newValue, ...里面有这个newValue？
从 Angular 中获取它，因为我以各种方式取出并修改它是行不通的，正如我所说我正在学习 vue，因为我正在构建
我不知道 angular，但我相信你需要在 angular 中使用它，因为它是 Angular.forEach 所以你需要指定哪个数组..你不需要它，因为它是原生 JavaScript forEach.. 我会为你做一个工作演示
勾选这个codepen.io/Mi_Creativity/pen/WNoLZpM?editors=0011，你可以在codepen控制台看到结果
你是一个绝对的传奇！！！！这非常有效，我脸上的笑容无法扩大！谢谢！！

标签： arrays angularjs vue.js vuejs2 watch

【解决方案1】：

从newValue 和oldValue 中删除this.

【讨论】：

我确实尝试过，但在控制台中抛出错误：- vue.runtime.esm.js?2b0e:619 [Vue 警告]：观察者“分数”的回调错误：“TypeError： [object Array] is not a function" vue.runtime.esm.js?2b0e:1888 TypeError: [object Array] is not a function
评分是否在数据处初始化？你在某处使用 score() 吗？
最好在第一篇文章中添加所有代码文件
已添加整个文件:)
首先把这个

【解决方案2】：

拿起上面的Mi-Creativity代码笔并进行修改，因为它使每个人都一样这现在完美无缺。感谢您的帮助

       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,
    },
  },

【讨论】：