Почему не применяются стили?

Question

[konst34]

Есть такой кусок кода:

<template>
<div class="categorySearch">
        <div v-on:click="change" v-on: mouseover="out" class="categorypopular">
          <a>
            {{ selected }}
            <div class="arrowcreate">
              <div class="arrowbottom"></div>
              <div class="arrowtop"></div>
            </div>
          </a>
        </div>
        <div class="" v-bind:class="{ one: one,  stels: stels }">
          <a v-on:click="select">По популярности</a>
          <a v-on:click="select">По возрастанию цены</a>
          <a v-on:click="select">По уменьшению цены</a>
          <a v-on:click="select">Сначала обсуждаемые</a>
          <a v-on:click="select">Сначала с лучшей оценкой</a>
        </div>
      </div>
    </div>
</template>


<script>
export default {
  data() {
    return {
      selected: "По популярности",
      one:  false,
      stels: true,
      powerOne: false,
      powerTwo: false,
      powerThree: false,
      categories: "",
    };
   }
  },
methods: {
change() {
      this.one = "categories";
      this.stels = !this.stels,
    },
}
</script>


<styles>
.stels {
  display: none;
}
.categorySearch {
  .categories {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 56px;
    margin-left: 35px;
    padding-top: 45px;
    cursor: pointer;
    width: 200px;

    a {
      top: -35px;
      z-index: 12;
      background: #fff8eb;
      border: 1.5px solid rgba(255, 169, 0, 0.45);
      border-radius: 8px;
      width: 200px;
      text-align: center;
      position: relative;
      left: -7px;
      margin-bottom: 1px;
    }
    a:hover {
      color: red;
    }
  }
}

</styles>

По нажатию on:click="change" у меня значение stels меняется на противоположное.
Т.е. по умолчанию stels = true, и, соответственно, должны применяться стиль .stels { display: none}
А когда происходит клик, то stels становится false, а one становится равным categories и должны примениться стили с таким же названием, но они не применяются.

В чем проблема? Что я делаю не так?
С меня благодарность!

Answer 1

[Aetae]

Если исправить все "технические" ошибки, которых у тебя тонна - то в самом коде Vue всё в порядке и переключение работает. :)

Ошибки из-за которых оно вообще не должно собираться, а должно всю консоль исписать:
1. Лишний закрывающий </div> в <template>.
2. v-on: mouseover="out" должно быть слитно v-on:mouseover="out".
3. Экспортируемый объект у тебя закрывается после data, methоds висят в воздухе.
4. Не <styles>, а <style> причём судя по вложенности не просто <style>, который ожидает обычный css, а <style lang="scss">.

Потенциальные ошибки:
1. Отсутствие методов out и select.
2. Отсутствие у <a> href="#" или, лучше, v-on:click.prevent из-за чего клик по ссылке открывает новую вкладку. А ещё лучше - не использовать <a> не для сссылок.
3. Скорее всего ты хочешь, чтобы в случае если one - стока, то назначался класс из этой строки, а не класс .one, в таком случае выглядеть это должно так: v-bind:class="[one, { stels: stels }]" или, хуже, v-bind:class="{ [one]: one, stels: stels }".

В целом: мужик, используй IDE, она тебе всё это заранее подчеркнёт; например VSCode абсолютно бесплатна.