Как присвоить компонентам значение по результатм логического ветвления?

Question

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

Приветствую.
В проекте есть страница с хуком mounted, он проверяет значение status, содержащееся в компоненте, после чего присваивает ему стиль. Проблема заключается в том, чтобы по результатам этого хука заодно присвоить значение в компоненты MyButton и передать в img путь к необходимому изображению.

<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>
              <th class="row">Создан</th>
              <th class="row">Изменён</th>
              <th class="row"></th>
            </tr>
            </thead>
            <tbody v-for="player in playersData" :key="player.ID">
            <tr>
              <td class="row">{{ player.PlayerName }}</td>
              <td class="row">{{ player.Age }}</td>
              <td class="row"><img class="sex"></td>
              <td class="row">
                <MyStatus class="M" style="width: 75%; padding: 0.25em 0.75em">
                  {{ player.Status }}
                </MyStatus>
              </td>
              <td class="row">{{ player.DateOfCreate }}</td>
              <td class="row">{{ player.DateOfEdit }}</td>
              <td class="row">
                <MyButton class="Secondary MSmall"></MyButton>
              </td>
            </tr>
            </tbody>
          </MySpreadsheet>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyNavbar from "@/components/UI/MyNavbar";
import MySpreadsheet from "@/components/UI/MySpreadsheet";
import MyStatus from "@/components/UI/MyStatus";
import MyButton from "@/components/UI/MyButton.vue";

export default {
  name: "SessionsPage",
  components: {MyButton, MyStatus, MySpreadsheet, MyNavbar},
  data() {
    return {
      playersData: [
        {
          ID: '1',
          PlayerName: 'Александров Игнат Анатолиевич',
          Age: '24',
          Sex: 'Female',
          Status: 'Заблокирован',
          DateOfCreate: '12 октября 2021',
          DateOfEdit: '22 октября 2021'
        },
        {
          ID: '2',
          PlayerName: 'Мартынов Остап Фёдорович',
          Age: '12',
          Sex: 'Female',
          Status: 'Активен',
          DateOfCreate: '12 октября 2021',
          DateOfEdit: '22 октября 2021'
        },
        {
          ID: '3',
          PlayerName: 'Комаров Цефас Александрович',
          Age: '83',
          Sex: 'Мale',
          Status: 'Активен',
          DateOfCreate: '12 октября 2021',
          DateOfEdit: '22 октября 2021'
        }]
    }
  },
  mounted() {
    let statuses = document.querySelectorAll('.M')
    statuses.forEach((item) => {
          if (item.innerText === 'Активен') {
            item.classList.add('Free')

          }
          if (item.innerText === 'Заблокирован') {
            item.classList.add('Blocked')

          }
        }
    )
  }
}
</script>

<style scoped>
.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.screen {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block {
  background: #ffffff;
  width: 48.5%;
  height: 90%;
  box-shadow: 0 4px 20px rgba(44, 57, 121, 0.09);
  border-radius: 40px;
  padding-left: 2.5%;
  padding-right: 2.5%;
}

.table-naming {
  font-weight: 700;
  font-size: 1.5em;
  line-height: 150%;
  margin-top: 4%;
  text-align: left;
}

td, th {
  padding-top: 1.5%;
  padding-bottom: 1.5%;
}

th {
  padding-top: 2.5%;
}

.row {
  text-align: left;
}

tr {
  box-shadow: inset 0 -1px 0 #EEEFF5;
}
</style>

Answer 1

[Wispik]

let statuses = document.querySelectorAll('.M')
    statuses.forEach((item) => {
          if (item.innerText === 'Активен') {
            item.classList.add('Free')

          }
          if (item.innerText === 'Заблокирован') {
            item.classList.add('Blocked')

          }
        }
    )

ну не надо во вью такими извращениями заниматься, это так делается:

<MyStatus 
  class="M"
  :class="{'Free': item.Status==='Активен', 'Blocked': item.Status==='Заблокирован'}"
  style="width: 75%; padding: 0.25em 0.75em"
>
    {{ player.Status }}
</MyStatus>

Ну и по вопросу не понятно, что надо в button передать и откуда надо путь img взять

Comments

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

Спасибо за совет по коду.
В Button нужно передать innerText. Для img есть два изображения в папке проекта (Эмодзи мужчины и женщины). Соответственно, если пол указан мужской, то путь указывается до эмодзи мужчины, в обратном случае до женщины.

[Wispik]

Илья Климов, все равно ты ничего не объяснил. Куда надо img вставит? (в коде выше вообще нет img) Какой innerText нужно вставить?
Попробую погадать, что innerText - это Status, тогда:

<MyButton class="Secondary MSmall">{{ player.Status }}</MyButton>

а картинку, например, так:

<img v-if="player.Sex==='Male'" src="тут путь картинки с мужчиной">
<img v-else src="тут с женщиной">

Ну и v-for надо в tr писать, а не в tbody

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

Wispik, с картинками принял. Думал просто разумнее будет не создавать 2 компонента, а менять путь. Спасибо!
В кнопку нужно передать:
- В случае со значением Player.Status === Активен: <img src='/.../.../путь/'> и текст "Заблокировать";
- В случае со значением Player.Status === Заблокирован: только текст "Разблокировать".

[Wispik]

Илья Климов, ну картинку и так можно:

<img :src="player.Sex==='Male' ?  <тут путь картинки с мужчиной> : <тут с женщиной>">

С кнопками через v-if, как я выше писал для картинок

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

Wispik, всё работает, большое спасибо! С картинками оставил предыдущий вариант, во ибо ещё когда сам пытался разобраться и сделать, то почему-то не прорисовывались при таком варианте исполнения, но не суть важно. Ещё раз благодарю за помощь и усердие).