0

У меня есть компонент select и проблема возникла, я не пойму как вне зоны компонента если пользователь чекнул, то срабатывало событие Мой пример

let options = [
	{ id: 1, name: "hello" },
  { id: 2, name: "goodbuy" },
  { id: 3, name: "world" },
];

let placeholder = "Check";

new Vue({
  el: "#app",
  data: {
  	options: options,
    placeholder: placeholder,
    name: null,
    id: null,
    disabled: false
  },
  methods: {
    closeOption() {
      if (this.disabled) {
        this.disabled = false;
      }
    },
    onClick() {
      this.disabled = this.disabled !== true;
    },
    checkOption(value) {
      this.name = value.name;
      this.id = value.id;
      this.disabled = false;
    }
  },
  created() {
    document.addEventListener("click", this.closeOption)
  }
})
.select-app {
  width: 300px;
  position: relative;
}
.select-app ul, .select-app input {
  cursor: pointer;
}
.select-app input {
  outline: none;
}
.select-app i {
  position: absolute;
  top: 6px;
  right: 3px;
}
.select-app ul {
  position: absolute;
  z-index: 1;
  background: #fefefe;
  width: 100%;
  list-style-type: none;
  padding: 10px 0;
  border: 1px solid #e5e5e5;
  box-shadow: -1px 1px 8px 0px #c3b8b8 75;
  border-radius: 4px;
  top: 0;
}
.select-app ul span {
  padding: 15px;
}
.select-app ul .active {
  background: #f7f7f7;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="select-app">
    <input type="text" class="field-form" :value="name" @click="onClick" :placeholder="`Выберите ${placeholder.toLowerCase()}`">
    <transition name="fade">
      <ul v-show="disabled">
        <li v-for="option in options" @click="checkOption(option)" :class="{ active: option.id === id }">
          <span>{{ option.name }}</span>
        </li>
      </ul>
    </transition>
  </div>
</div>

Я думал что на дом повесить обработчик типо document.addEventListener("click", this.onClick) Но почему то не сработало

2
  • 1
    Ну на документ обработчик примерно так и вешается, как вы привели. Специальных API для этого не предусмотрено. Вам только нужно определиться, когда именно вешать обработчик. Можете, например, воспользоваться хуками компонентов, типа created, updated и т.д. и дальше уже добавлять, как привели в вопросе. 6 дек 2018 в 12:30
  • А с чего вы взяли, что событие не срабатывает? Вы то все правильно сделали и событие рабочее, а вот логика кода под вопросом. Перепроверьте еще раз.
    – Doigrales
    6 дек 2018 в 12:43

2 ответа 2

0

Вы должны были предотвратить распространение события при клике на input.

 onClick(e) {
    e.stopImmediatePropagation();
    this.disabled = this.disabled !== true;
 }

Или используйте модификаторы событий для v-on:

<a @click.stop="onClick"></a>
3
  • Не совсем понял что изменилось, я попробовал jsfiddle.net/a28wmzfg/8 осталось тоже самое. Может я что-то не делаю так 6 дек 2018 в 13:07
  • Еще раз, берем ваш код и выполняем jsfiddle.net/kr2q9tmz ))) Событие closeOption срабатывает, как у вас написано в коде, или вы что то другое хотели?
    – Doigrales
    6 дек 2018 в 13:14
  • Здесь помогло, в проекте нет 7 дек 2018 в 6:30
0

так как это компонент, который я указывал в решение, то он может быть везде и чтобы можно было проследить, что именно этот список открылся, то необходимо проверить через refs принадлежит он к родителю или нет. А так будет чекать в глобальный блок и все действие будут происзодить для всех списокв

closeOption(e) {
        // Если клик идет по элементу, то ничего не делаем. Закрываем только при клике на внешнюю область
        if (this.$refs['select'].contains(e.target)){
        return;
        }
      if (this.disabled) {
        this.disabled = false;
      }
    },
4
  • если это решение - поясни в чем была проблема и как именно данное решение ее решает, если это не решение, то удали ответ и добавь все необходимое непосредственно в вопрос
    – Grundy
    7 дек 2018 в 6:46
  • так как это компонент, который я указывал в решение, то он может быть везде и чтобы можно было проследить, что именно этот список открылся, то необходимо проверить через refs принадлежит он к родителю или нет. А так будет чекать в глобальный блок и все действие будут происзодить для всех списокв 7 дек 2018 в 12:00
  • Добавь это пояснение в сам ответ, а не комментарий. Отредактировать ответ можно с помощью кнопки править
    – Grundy
    7 дек 2018 в 12:02
  • Код приведенный в ответе чем-то отличается от того, что приведен в вопросе?
    – Grundy
    7 дек 2018 в 12:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.