Почему v-on:click не работает, а v-on:mouseout работает?

Question

[aLeXxX_03]

Здравствуйте.
Проблема в следующем - при наведении мышки с помощью v-on:mouseout="out" у меня выпадает выпадающее меню.
Т.к. там меняется булевое значение у двух переменных с trueна falseи с falseна true.
Но, если я задаю v-on:click="out", то ничего не работает и значение переменной не меняется, а потому выпадающий список не выпадает.

В чем проблема?
Помогите, пожалуйста.

HTML

<template>
  <div class="container" v-on:click="changeTwo">
    <div class="title">
      <h1>Хлеб и выпечка</h1>
      <div class="categorySearch">
        <div
          v-on:сlick="event.stopPropagation()"
          v-on:click:="change"
          v-on:mouseout="out"
          class="categorypopular"
        >
          <a>
            {{ selected }}
            <div class="arrowcreate">
              <div class="arrowbottom"></div>
              <div class="arrowtop"></div>
            </div>
          </a>
        </div>
        <div :class="{ categories: 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>
  </div>
</template>

JS

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

    onChange() {
      return;
    },
  },
};
</script>

css

<style lang="scss" scoped>
.link {
  font-size: 20px;
  font-weight: 700;
}
a {
  font-size: 16px;
  font-weight: 300;
}
.link {
  text-decoration: none;
}
.stels {
  display: none;
}
.categorypopular {
  position: relative;
  width: 261px;
  padding: 5px;
  background: #fff8eb;
  border: 1px solid rgba(255, 169, 0, 0.45);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  a {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    left: -10px;
  }
  .arrowcreate {
    position: relative;
    left: 20px;
  }
}

.categorySearch {
  .categories {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 56px;
    margin-left: 35px;
    padding-top: 37px;
    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;
    }
  }
}

.mainList {
  position: relative;
  width: 1291px;
  margin: 0 auto;
  font-family: "Nunito-Medium";
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 27px;
  div {
    margin-bottom: 15px;
  }
  color: #000000;
  input:checked {
    background: #ff1f00;
  }
}

.yes {
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(255, 169, 0, 0.35);
  appearance: none;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: rgba(255, 169, 0, 0.35);
  transition: all ease-in 0.2s;
}

.yes:checked {
  background-color: #232323;
}

.centerBlock {
  display: flex;
}
.leftBlock {
  ul {
    li {
      list-style: none;
      font-family: "Nunito-Medium";
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 27px;
      color: #000000;
    }
    li:active {
      color: #f00;
    }
    li:visited {
      color: #f00;
    }
  }
  p {
    position: relative;
    right: 20px;
    font-family: "Nunito-Medium";
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;
    color: #000000;
  }
}
.centerBlock {
  display: flex;
}
.links {
  display: relative;
  margin-top: 30px;
  ul {
    display: flex;
    flex-wrap: wrap;
  }
  li {
    background: #fff8eb;
    border: 1px solid rgba(255, 169, 0, 0.45);
    border-radius: 16px;
    list-style: none;
    padding: 5px 25px;
    margin-right: 10px;
    margin-bottom: 12px;
    color: black;
  }
}

.mainList {
  position: relative;
  width: 1291px;
  margin: 0 auto;
  font-family: "Nunito-Medium";
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  div {
    margin-bottom: 15px;
  }
  color: #000000;
  input:checked {
    background: #ff1f00;
  }
}
.Peculiarities {
  width: 525px;
}
.titleBlock {
  display: flex;
}
.container {
  width: 1291px;
  margin: 0 auto;
  position: relative;
  margin-top: 200px;
  font-family: "Nunito-Medium";
}
</style>

Answer 1

[Вадим]

Потому что мат часть нужно сначала учить, прежде чем во фреймворки суваться...

У Вас на container висит обработчик клика.
События, большинство, всплывают.
Сначала при клике срабатывает one
а потом changeTwo, висящий на container, где меняется всё обратно.

Соответственно, когда у Вас было при наведении, то и не было "конфликта" с обработчиком клика на container, так как это разные события.

Что делать - не делать такую жуткую кашу с вложенными "интерактивными элементами".
А если никак - то гуглить модифкатор .stop во vue или event.stopPropagation.

https://learn.javascript.ru/events

Answer 2

[Антон Антон]

Потому что нельзя два раза привязывать обработчик и потому что второй раз он привязан с опечаткой.
рекомендую настроить eslint и volar в vscode, он такие вещи подсвечивает.

Comments

[aLeXxX_03]

даже, когда я сделал вот так:
<div v-on:click="out" class="categorypopular" >
вместо того, как было, т.е. вот так:

<div
          v-on:сlick="event.stopPropagation()"
          v-on:click:="change"
          v-on:mouseout="out"
          class="categorypopular"
        >

, то не работает все равно...