Как заставить работать стили?

Question

[Darkness]

Привет, возникла проблема, с которой я не могу разобраться в одиночку, поэтому надеюсь на вашу помощь! Заранее извиняюсь, что только так код.
Итак, у меня есть верстка:

.choicePrice(v-for="item in getCheckouts")
  p {{item.text + ' ' + item.price}}
.priceOne
   input(type="radio" id="priceChoice" name="choicePrice" class="inputMoney")
   label(class="labelMoney" for="choicePrice")

Как видно из state, я беру только текст и цену.
Далее идет контейнер со стилями. Input по умолчанию отсутствует, он скрыт, и я делаю кастомный label со стилями(обычное дело когда нужно кастомизировать input)

Ниже его стиль:

.priceOne
  position absolute
  width 180px
  left 18.5px
  bottom -91px
  height 180px
  background #eddcc4
  z-index 1
  transform rotate(-45deg)
  border-bottom-left-radius 30%
  border-top-right-radius 30%
  display flex
  align-items flex-end
  margin-left 20px

Когда я нажимаю на него(label), появляется :: after и фон меняется

#priceChoice:checked+label:after
  background #f4c94f !important

Также вот стили для labelMoney

.labelMoney
  display inline-block
  position relative
  line-height 20px
  cursor pointer
  &::before
    content ""
    position absolute
    top -76px
    right -80px
    width 50px
    height 50px
    border-radius 50%
    background-color #fff
    z-index 5
   &:after
   z-index 10
   content ""
   position absolute
   left 37px
   top -68px
   width 35px
   height 35px
   border-radius 50%
   background #ffffff

Проблема в том, что это не работает. Те. У меня есть похожие стили ниже, но без vuex( в разных контейнерах), и все работает (метка :: after заменяет фон). Ничто не помогает ни z-index, ни изменение позиции, даже если style сделать без scoped :checked. Пожалуйста, укажите ошибку!

Еще скрин, чтобы точно понять о чем я:

Comments

[ⓒⓢⓢ]

Также вот стили для labelMoney

если вы используете отступо-зависимые препроцессоры, то наверняка должны знать, что отступы играют ключевую роль. Стили для after неизвестно или у вас не используются или нам показали заведомо неправильно

[Darkness]

JRK_DV, да, тут опечатка, они используется.

[ⓒⓢⓢ]

Darkness,
ещё вопрос, этот кусок выводиться в цикле или ".priceOne" в единственном экземпляре?

.choicePrice(v-for="item in getCheckouts")
  p {{item.text + ' ' + item.price}}
.priceOne
   input(type="radio" id="priceChoice" name="choicePrice" class="inputMoney")
   label(class="labelMoney" for="choicePrice")

Если в цикле, то радио кнопки получат одинаковые идентификаторы, что нельзя.
По хорошему, так бы в песочницу код, потому что приходится только гадать

[Darkness]

JRK_DV, Да, Id он получает одинаковые, что я и изменил уже в state, и только так могу получить то, что нужно

[ⓒⓢⓢ]

Darkness, и по итогу вам не нравиться, то что используются идентификаторы из state?

Поэтому решение нашел стремное, а именно я динамически передаю новые id, на каждую итерацию цикла. Т.е. 4 id из state, после уже в стили делаю такие как и были :after+label и тд. Нужный функционал то я получил, но весь дерьмо код - вижу

Можно взять индексы из цикла и составить строку-идентификатор

.choicePrice(v-for="(item, index) in getCheckouts")
  p {{item.text + ' ' + item.price}}
  .priceOne
    input(type="radio" :id="`priceChoice${index}`" name="choicePrice" class="inputMoney")
    label(class="labelMoney" for="choicePrice")

на выводе ид. будут такие: priceChoice1, priceChoice2, priceChoice3, ...

upd
#priceChoice:checked+label:after
и блок стилей соответственно будут уже не по идентификатору, а например по классу ...

Answer 1

[Darkness]

Как я понял, у меня либо жесткое наложение, либо просто не видно куда и что тыкается. (не работает другими словами) После разбора всех атрибутов, я дошел до того что 1 кружок ставится НЕ зависимо куда ты тыкнешь. Тут уже было понятно, что это :after вешается по id (как мы и писали) и только на первый элемент. Поэтому решение нашел стремное, а именно я динамически передаю новые id, на каждую итерацию цикла. Т.е. 4 id из state, после уже в стили делаю такие как и были :after+label и тд. Нужный функционал то я получил, но весь дерьмо код - вижу. Если у вас будут лучшее решение, чем мое - с радостью узнаю и попробую!

Зачем вообще мне нужен был state? Дело в том, что именно вот эти цифры ( цена) отправляется к нам в базу, и по клику динамически (там еще есть ниже верстка) перемещаем туда тоже. Т.е. можно было без state, но писать доп.кода нет смысла, да и ошибки будут 100%.