kl1mmm
@kl1mmm
Хто я?

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

Приветствую.
В проекте есть страница с хуком 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>
  • Вопрос задан
  • 71 просмотр
Решения вопроса 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 взять
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы