Vue 数组和循环问题

【问题标题】：Vue array and loop issuesVue 数组和循环问题
【发布时间】：2021-03-26 11:57:07
【问题描述】：

我有一个从 api 调用的大表，它被分解成一个分数数组，我循环显示每个玩家

          <tr
            class="RT"
            v-for="(playerData, index) in scores"
            :key="index + Math.random()"
          >

现在在每个 playerData 数组中，每天都会更改回合，即 score_R1 第二天 score_R2 等，并且有一个 rounds_played。在表的后面，我需要根据播放的回合循环分数，所以如果 rounds_played:'1' 然后循环 score_R1 如果 rounds_played:'2' 循环 score_R2 等我可以创建一个函数，让我循环我想要但是将其作为字符串而不是要查找的值提供给我。

              <td
                class="CS"
                v-for="(r1, index) in (score() || '')
                  .split(',')
                  .slice(0, 9)"
                :key="index + Math.random()"
              >
    methods:{
    score: function(value){
      value = 'playerData.score_R'+this.roundsPlayer
      return value
    },
}

我将添加我的整个页面代码，以便您也可以看到它，但它非常庞大，因为由于我遇到的这个问题，我不得不复制大块。

<template>
  <div>
    <div v-if="tabs !== true">
      <img class="sponsor" :src="data.event_sponsor_logo" />
    </div>
    <div class="title">
      <h2>{{ data.full_name }} - {{ data.round_head }}</h2>
      <p>
        {{ data.course_dates }}
      </p>
      <p>Projected Finish Time - {{ data.pft_time }}</p>
      <p>
        <span>
          Last Score Update {{ data.last_scores_update_date }}
          {{ data.last_scores_update_time }}
        </span>
      </p>
    </div>
    <div class="table-responsive">
      <table>
        <thead>
          <tr class="title">
            <th class="CP"></th>
            <th class="CN"></th>
            <th class="CF"></th>
            <th class="CT"></th>
            <th class="CV"></th>
            <th class="CS">
              1
            </th>
            <th class="CS">
              2
            </th>
            <th class="CS">
              3
            </th>
            <th class="CS">
              4
            </th>
            <th class="CS">
              5
            </th>
            <th class="CS">
              6
            </th>
            <th class="CS">
              7
            </th>
            <th class="CS">
              8
            </th>
            <th class="CS">
              9
            </th>
            <th class="CS">
              Out
            </th>
            <th class="CS">
              10
            </th>
            <th class="CS">
              11
            </th>
            <th class="CS">
              12
            </th>
            <th class="CS">
              13
            </th>
            <th class="CS">
              14
            </th>
            <th class="CS">
              15
            </th>
            <th class="CS">
              16
            </th>
            <th class="CS">
              17
            </th>
            <th class="CS">
              18
            </th>
            <th class="CS">
              IN
            </th>
            <th class="CS">
              TOT
            </th>
          </tr>
          <tr class="title">
            <th class="CP">
              Pos
            </th>
            <th class="CN">
              Player Name
            </th>
            <th class="CF">
              Nat.
            </th>
            <th class="CT">
              Tot
            </th>
            <th class="CV">
              VsPar
            </th>
            <th
              class="CS"
              v-for="(course, index) in data.course_par.split(',').slice(0, 9)"
              :key="index + Math.random()"
            >
              {{ course }}
            </th>
            <th class="CS">
              {{ data.course_out_par.slice(1) }}
            </th>
            <th
              class="CS"
              v-for="(course, index) in data.course_par.split(',').slice(9, 18)"
              :key="index + Math.random()"
            >
              {{ course }}
            </th>
            <th class="CS">
              {{ data.course_in_par.slice(1) }}
            </th>
            <th class="CS">
              {{ data.course_total_par }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            class="RT"
            v-for="(playerData, index) in scores"
            :key="index + Math.random()"
          >
            <td v-if="playerData.pos !== 'CUT'">
              <span
                v-if="
                  index !== 0 &&
                    (playerData.tied !== '=' ||
                      scores[index - 1].pos !== playerData.pos)
                "
                class="CP pos"
              >
                {{ playerData.pos }}
              </span>
              <span v-else-if="index === 0" class="CP pos">
                {{ playerData.pos }}
              </span>
              <span v-else></span>
            </td>

            <td
              v-if="playerData.pos !== 'CUT'"
              :title="playerData.member_no"
              :class="{
                'text-up': playerData.posChang == 'up',
                'text-down': playerData.posChang == 'down',
              }"
            >
              <a :href="'/#/playerprofile/' + playerData.id">
                {{ playerData.name }}</a
              >
              <span v-if="playerData.pro_ind === 'Am'">(a)</span>
            </td>
            <td
              v-if="playerData.pos !== 'CUT'"
              class="CF"
              :title="playerData.nationality"
            >
              <span>
                <img
                  class="flag"
                  :src="
                    ('https://assets.ocs-sport.com/flags/svg/flag_' +
                      playerData.nationality)
                      | lowercase
                  "
                />
              </span>
            </td>
            <td v-if="playerData.pos !== 'CUT'">
              <span v-if="playerData.vspar < 0" :class="up">
                {{ playerData.vspar }}
              </span>
              <span v-else-if="playerData.vspar > 0" :class="down">
                {{ playerData.vspar }}
              </span>
              <span v-else>
                {{ playerData.vspar }}
              </span>
            </td>

            <td v-if="playerData.pos !== 'CUT'" :class="CV">
              <span v-if="data.rounds_played === '1'">
                <span v-if="playerData.vspar_R1 < 0" :class="up">
                  {{ playerData.vspar_R1 }}
                </span>
                <span v-else-if="playerData.vspar_R1 > 0" :class="down">
                  {{ playerData.vspar_R1 }}
                </span>
                <span v-else>
                  {{ playerData.vspar_R1 }}
                </span>
              </span>
              <span v-if="data.rounds_played === '2'">
                <span v-if="playerData.vspar_R2 < 0" :class="up">
                  {{ playerData.vspar_R2 }}
                </span>
                <span v-else-if="playerData.vspar_R2 > 0" :class="down">
                  {{ playerData.vspar_R2 }}
                </span>
                <span v-else>
                  {{ playerData.vspar_R2 }}
                </span>
              </span>
            </td>
            <td class="cut" colspan="30" v-if="playerData.pos === 'CUT'">
              {{ playerData.pos }} {{ playerData.cut_round }}
            </td>
            <template
              v-if="data.rounds_played === '1' && playerData.pos !== 'CUT'"
            >
              <td
                class="CS"
                v-for="(r1, index) in (playerData.hole_scores_R1 || '')
                  .split(',')
                  .slice(0, 9)"
                :key="index + Math.random()"
              >
                <span
                  class="twoUnder"
                  v-if="
                    (playerData.hole_vspars_R1 || '').split(',')[index] == -2
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="oneUnder"
                  v-else-if="
                    (playerData.hole_vspars_R1 || '').split(',')[index] == -1
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="oneOver"
                  v-else-if="
                    (playerData.hole_vspars_R1 || '').split(',')[index] == 1
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="twoOver"
                  v-else-if="
                    (playerData.hole_vspars_R1 || '').split(',')[index] == 2
                  "
                >
                  {{ r1 }}
                </span>
                <span v-else>
                  {{ r1 }}
                </span>
              </td>
              <td class="CS">
                <span
                  v-if="
                    sum(
                      (playerData.hole_scores_R1 || '').split(',').slice(0, 9)
                    ) > data.course_out_par
                  "
                  class="down"
                >
                  {{
                    sum(
                      (playerData.hole_scores_R1 || "").split(",").slice(0, 9)
                    )
                  }}
                </span>
                <span
                  v-else-if="
                    sum(
                      (playerData.hole_scores_R1 || '').split(',').slice(0, 9)
                    ) < data.course_out_par
                  "
                  class="up"
                >
                  {{
                    sum(
                      (playerData.hole_scores_R1 || "").split(",").slice(0, 9)
                    )
                  }}
                </span>
                <span v-else>
                  {{
                    sum(
                      (playerData.hole_scores_R1 || "").split(",").slice(0, 9)
                    )
                  }}
                </span>
              </td>
              <td
                class="CS"
                v-for="(r1, index) in (playerData.hole_scores_R1 || '')
                  .split(',')
                  .slice(9, 18)"
                :key="index + Math.random()"
              >
                <span
                  class="twoUnder"
                  v-if="
                    (playerData.hole_vspars_R1 || '').split(',').slice(9, 18)[
                      index
                    ] == -2
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="oneUnder"
                  v-else-if="
                    (playerData.hole_vspars_R1 || '').split(',').slice(9, 18)[
                      index
                    ] == -1
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="oneOver"
                  v-else-if="
                    (playerData.hole_vspars_R1 || '').split(',').slice(9, 18)[
                      index
                    ] == 1
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="twoOver"
                  v-else-if="
                    (playerData.hole_vspars_R1 || '').split(',').slice(9, 18)[
                      index
                    ] == 2
                  "
                >
                  {{ r1 }}
                </span>
                <span v-else>
                  {{ r1 }}
                </span>
              </td>
              <td class="CS">
                <span
                  v-if="
                    sum(
                      (playerData.hole_scores_R1 || '').split(',').slice(9, 18)
                    ) > data.course_in_par
                  "
                  class="down"
                >
                  {{
                    sum(
                      (playerData.hole_scores_R1 || "").split(",").slice(0, 9)
                    )
                  }}
                </span>
                <span
                  v-else-if="
                    sum(
                      (playerData.hole_scores_R1 || '').split(',').slice(9, 18)
                    ) < data.course_in_par
                  "
                  class="up"
                >
                  {{
                    sum(
                      (playerData.hole_scores_R1 || "").split(",").slice(9, 18)
                    )
                  }}
                </span>
                <span v-else>
                  {{
                    sum(
                      (playerData.hole_scores_R1 || "").split(",").slice(9, 18)
                    )
                  }}
                </span>
              </td>
              <td class="CS">
                <span
                  v-if="playerData.score_R1 > data.course_total_par"
                  class="down"
                >
                  {{ playerData.score_R1 }}
                </span>
                <span
                  v-else-if="playerData.score_R1 < data.course_total_par"
                  class="up"
                >
                  {{ playerData.score_R1 }}
                </span>
                <span v-else>
                  {{ playerData.score_R1 }}
                </span>
              </td>
            </template>
            <template
              v-if="data.rounds_played === '2' && playerData.pos !== 'CUT'"
            >
              <td
                class="CS"
                v-for="(r1, index) in (playerData.hole_scores_R2 || '')
                  .split(',')
                  .slice(0, 9)"
                :key="index + Math.random()"
              >
                <span
                  class="twoUnder"
                  v-if="
                    (playerData.hole_vspars_R2 || '').split(',')[index] == -2
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="oneUnder"
                  v-else-if="
                    (playerData.hole_vspars_R2 || '').split(',')[index] == -1
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="oneOver"
                  v-else-if="
                    (playerData.hole_vspars_R2 || '').split(',')[index] == 1
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="twoOver"
                  v-else-if="
                    (playerData.hole_vspars_R2 || '').split(',')[index] == 2
                  "
                >
                  {{ r1 }}
                </span>
                <span v-else>
                  {{ r1 }}
                </span>
              </td>
              <td class="CS">
                <span
                  v-if="
                    sum(
                      (playerData.hole_scores_R2 || '').split(',').slice(0, 9)
                    ) > data.course_out_par
                  "
                  class="down"
                >
                  {{
                    sum(
                      (playerData.hole_scores_R2 || "").split(",").slice(0, 9)
                    )
                  }}
                </span>
                <span
                  v-else-if="
                    sum(
                      (playerData.hole_scores_R2 || '').split(',').slice(0, 9)
                    ) < data.course_out_par
                  "
                  class="up"
                >
                  {{
                    sum(
                      (playerData.hole_scores_R2 || "").split(",").slice(0, 9)
                    )
                  }}
                </span>
                <span v-else>
                  {{
                    sum(
                      (playerData.hole_scores_R2 || "").split(",").slice(0, 9)
                    )
                  }}
                </span>
              </td>
              <td
                class="CS"
                v-for="(r1, index) in (playerData.hole_scores_R2 || '')
                  .split(',')
                  .slice(9, 18)"
                :key="index + Math.random()"
              >
                <span
                  class="twoUnder"
                  v-if="
                    (playerData.hole_vspars_R2 || '').split(',').slice(9, 18)[
                      index
                    ] == -2
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="oneUnder"
                  v-else-if="
                    (playerData.hole_vspars_R2 || '').split(',').slice(9, 18)[
                      index
                    ] == -1
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="oneOver"
                  v-else-if="
                    (playerData.hole_vspars_R2 || '').split(',').slice(9, 18)[
                      index
                    ] == 1
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="twoOver"
                  v-else-if="
                    (playerData.hole_vspars_R2 || '').split(',').slice(9, 18)[
                      index
                    ] == 2
                  "
                >
                  {{ r1 }}
                </span>
                <span v-else>
                  {{ r1 }}
                </span>
              </td>
              <td class="CS">
                <span
                  v-if="
                    sum(
                      (playerData.hole_scores_R2 || '').split(',').slice(9, 18)
                    ) > data.course_in_par
                  "
                  class="down"
                >
                  {{
                    sum(
                      (playerData.hole_scores_R2 || "").split(",").slice(0, 9)
                    )
                  }}
                </span>
                <span
                  v-else-if="
                    sum(
                      (playerData.hole_scores_R2 || '').split(',').slice(9, 18)
                    ) < data.course_in_par
                  "
                  class="up"
                >
                  {{
                    sum(
                      (playerData.hole_scores_R2 || "").split(",").slice(9, 18)
                    )
                  }}
                </span>
                <span v-else>
                  {{
                    sum(
                      (playerData.hole_scores_R2 || "").split(",").slice(9, 18)
                    )
                  }}
                </span>
              </td>
              <td class="CS">
                <span
                  v-if="playerData.score_R2 > data.course_total_par"
                  class="down"
                >
                  {{ playerData.score_R2 }}
                </span>
                <span
                  v-else-if="playerData.score_R2 < data.course_total_par"
                  class="up"
                >
                  {{ playerData.score_R2 }}
                </span>
                <span v-else>
                  {{ playerData.score_R2 }}
                </span>
              </td>
            </template>
            <template
              v-if="data.rounds_played === '3' && playerData.pos !== 'CUT'"
            >
              <td
                class="CS"
                v-for="(r1, index) in (score() || '')
                  .split(',')
                  .slice(0, 9)"
                :key="index + Math.random()"
              >
                <span
                  class="twoUnder"
                  v-if="
                    (playerData.hole_vspars_R3 || '').split(',')[index] == -2
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="oneUnder"
                  v-else-if="
                    (playerData.hole_vspars_R3 || '').split(',')[index] == -1
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="oneOver"
                  v-else-if="
                    (playerData.hole_vspars_R3 || '').split(',')[index] == 1
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="twoOver"
                  v-else-if="
                    (playerData.hole_vspars_R3 || '').split(',')[index] == 2
                  "
                >
                  {{ r1 }}
                </span>
                <span v-else>
                  {{ r1 }}
                </span>
              </td>
              <td class="CS">
                <span
                  v-if="
                    sum(
                      (playerData.hole_scores_R3 || '').split(',').slice(0, 9)
                    ) > data.course_out_par
                  "
                  class="down"
                >
                  {{
                    sum(
                      (playerData.hole_scores_R3 || "").split(",").slice(0, 9)
                    )
                  }}
                </span>
                <span
                  v-else-if="
                    sum(
                      (playerData.hole_scores_R3 || '').split(',').slice(0, 9)
                    ) < data.course_out_par
                  "
                  class="up"
                >
                  {{
                    sum(
                      (playerData.hole_scores_R3 || "").split(",").slice(0, 9)
                    )
                  }}
                </span>
                <span v-else>
                  {{
                    sum(
                      (playerData.hole_scores_R3 || "").split(",").slice(0, 9)
                    )
                  }}
                </span>
              </td>
              <td
                class="CS"
                v-for="(r1, index) in (playerData.hole_scores_R3 || '')
                  .split(',')
                  .slice(9, 18)"
                :key="index + Math.random()"
              >
                <span
                  class="twoUnder"
                  v-if="
                    (playerData.hole_vspars_R3 || '').split(',').slice(9, 18)[
                      index
                    ] == -2
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="oneUnder"
                  v-else-if="
                    (playerData.hole_vspars_R3 || '').split(',').slice(9, 18)[
                      index
                    ] == -1
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="oneOver"
                  v-else-if="
                    (playerData.hole_vspars_R3 || '').split(',').slice(9, 18)[
                      index
                    ] == 1
                  "
                >
                  {{ r1 }}
                </span>
                <span
                  class="twoOver"
                  v-else-if="
                    (playerData.hole_vspars_R3 || '').split(',').slice(9, 18)[
                      index
                    ] == 2
                  "
                >
                  {{ r1 }}
                </span>
                <span v-else>
                  {{ r1 }}
                </span>
              </td>
              <td class="CS">
                <span
                  v-if="
                    sum(
                      (playerData.hole_scores_R3 || '').split(',').slice(9, 18)
                    ) > data.course_in_par
                  "
                  class="down"
                >
                  {{
                    sum(
                      (playerData.hole_scores_R3 || "").split(",").slice(0, 9)
                    )
                  }}
                </span>
                <span
                  v-else-if="
                    sum(
                      (playerData.hole_scores_R3 || '').split(',').slice(9, 18)
                    ) < data.course_in_par
                  "
                  class="up"
                >
                  {{
                    sum(
                      (playerData.hole_scores_R3 || "").split(",").slice(9, 18)
                    )
                  }}
                </span>
                <span v-else>
                  {{
                    sum(
                      (playerData.hole_scores_R3 || "").split(",").slice(9, 18)
                    )
                  }}
                </span>
              </td>
              <td class="CS">
                <span
                  v-if="playerData.score_R3 > data.course_total_par"
                  class="down"
                >
                  {{ playerData.score_R3 }}
                </span>
                <span
                  v-else-if="playerData.score_R3 < data.course_total_par"
                  class="up"
                >
                  {{ playerData.score_R3 }}
                </span>
                <span v-else>
                  {{ playerData.score_R3 }}
                </span>
              </td>
            </template>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "livescoreboard",
  props: ["tabs"],
  data() {
    return {
      data: [],
      scores: [],
      up: "up",
      down: "down",
      CS: "CS",
      CV: "CV",
      CT: "CT",
      CN: "CN",
      CP: "CP",
      CF: "CF",
      currentReport: this.$route.query.url,
    };
  },
  computed: {
    reportTitle: function(url) {
      if (this.currentReport.indexOf("tmlsmon") !== -1) {
        {
          url =
            "https://info.alpstourgolf.com/api/" +
            "ffg" +
            "/cache/" +
            "alp" +
            "/" +
            this.$route.query.id +
            "/" +
            this.$route.query.id +
            "-" +
            this.$route.query.code +
            "-scores-latest.json" +
            "?gt=y&randomadd=" +
            new Date().getTime();
          // var url = "http://dev-auspga.ocs-software.com/api/dev/cache/dev/215S/215S-AUS7-scores-latest.json?gt=y&randomadd=1573131881374"
        }
      }
      return url;
    },
    roundsPlayer: function() {
      return parseInt(this.data.rounds_played);
    },
  },
  watch: {
    scores: {
      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,
    },
  },
  filters: {
    lowercase: function(value) {
      if (!value) {
        return "";
      }
      return value.toLowerCase() + ".svg";
    },
  },
  created() {
    setInterval(this.updateStuff, 120000);
  },
  methods: {
    updateStuff: function() {
      axios.get(this.reportTitle).then((response) => {
        (this.data = response.data),
          (this.scores = response.data.scores.scores_entry);
      });
    },
    score: function(value){
      value = 'playerData.score_R'+this.roundsPlayer
      return value
    },
    sum: function(nums) {
      let result = 0;
      nums.forEach(function(n) {
        result += n * 1;
      });
      return result;
    },
  },
  mounted() {
    axios.get(this.reportTitle).then((response) => {
      (this.data = response.data),
        (this.scores = response.data.scores.scores_entry);
    });
  },
};
</script>

【问题讨论】：

  • 你能分享一个codepen链接到你的代码吗？

标签： arrays vue.js inject


【解决方案1】：

很久以前就知道了 playerData['hole_scores_R' + i]

根据答案中要求的更多信息：-

<td v-for="(i, roundIt) in range(1, roundsPlayed)" :key="roundIt">. 
  <span v-if="roundsPlayed === 1 && tabledata.vspar < 0" class="up"> 
     {{ tabledata.score }}
  </span>
  <span v-else-if="roundsPlayed === 1 && tabledata.vspar > 0" 
   class="down">{{ tabledata.score }}
  </span>
  <span v-else-if="roundsPlayed === 1">
   {{ tabledata.score }}
  </span>
  <span v-else-if="tabledata['vspar_R' + i] < 0" :class="up">
   {{ tabledata["score_R" + i] }}
  </span> 
  <span v-else-if="tabledata['vspar_R' + i] > 0" :class="down">
   {{ tabledata["score_R" + i] }}</span> 
  <span v-else>
   {{ tabledata["score_R" + i] }}
  </span> 
</td>

【讨论】：

  • 这不是一个正确的答案，更具体并详细说明这将如何解决 OP 的问题。
  • 它不是一个正确的答案，但这是我的问题，过了一段时间我修复了它，所以我的答案。我正在尝试一种方法，但它不起作用，它应该在 td 中，如下所示。
  • {{ tabledata.score }} {{ tabledata.score }} {{ tabledata.score }} {{ tabledata["score_R" + i] }} {{ tabledata["score_R" + i] }} {{ tabledata["score_R" + i] }} 跨度>
  • 将此添加到您的答案中，而不是在评论中发布。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-04-09
  • 1970-01-01
  • 1970-01-01
  • 2018-06-09
  • 2011-10-04
  • 2010-12-25
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode