Как вызвать данные в функцию?

Question

[Илья Климов]

Приветствую. Озадачился вопросом: Как вызвать данные, описанные в формате JS, в создаваемую функцию? Суть функции в том, что она будет проверять кто является победителем игры и создавать для победителя игры эмодзи с кубком, поэтому по возможности, буду благодарен ответам с предусмотренным именно такого функционала, во ибо пока не совсем понимаю как именно для определённой игры создавать плашку после проверки.
Код прикрепляю ниже:

<template>
  <div class="wrapper">
    <MyNavbar style="width: 100%;"></MyNavbar>
    <div class="screen">
      <div class="block">
        <div class="table-naming">
          История игр
        </div>
        <div class="table">
          <MySpreadsheet class="spreadSheet">
            <thead>
            <tr>
              <th class="row">Игроки</th>
              <th class="row"></th>
              <th class="row">Дата</th>
              <th class="row">Время игры</th>
            </tr>
            </thead>
            <tbody v-for="game in gamesData" :key="game.ID">
            <tr>
              <td class="row"><img id="player1" alt="0" class="gameImg"
                                   src="@/components/UI/pics/ZeroPlayer1.svg">{{ game.Player1Name }}
              </td>
              <div class="versus row">против</div>
              <td class="row"><img id="player2" alt="X" class="gameImg"
                                   src="@/components/UI/pics/CrossPlayer2.svg">{{ game.Player2Name }}
              </td>
              <td class="row">{{ game.Date }}</td>
              <td class="row">{{ game.Time }}</td>
            </tr>
            </tbody>
          </MySpreadsheet>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyNavbar from "@/components/UI/MyNavbar";
import MySpreadsheet from "@/components/UI/MySpreadsheet";

export default {
  name: "HistoryPage",
  components: {MySpreadsheet, MyNavbar},
  data() {
    return {
      gamesData: [{
        ID: '1',
        Player1Name: 'Терещенко У. Р.',
        Player2Name: 'Многогрешный П. В.',
        Winner: 'Терещенко У. Р.',
        Date: '12 февраля 2022',
        Time: '43 мин. 13 сек.'
      }]
    }
  }/*,
  methods: {
    whosWinner() {
      const $player1 = document.querySelector('player1'), $player2 = document.querySelector('player2');
    }
  }*/
}
</script>

Answer 1

[Wispik]

Вот схематический пример, как сделать:

<div v-if="game.Winner=== game.Player1Name">тут кубок</div>

Ну и вместо этого:
const $player1 = document.querySelector('player1')
во vue принято использовать ref

Comments

[Илья Климов]

Про ref ещё почитаю и ознакомлюсь. Большое спасибо за ответ и верно подмеченный нюанс.