Ответы пользователя по тегу Vue.js
  • Как повесить active class?

    @zxf
    <div :class="{ ‘pb-2’: isActive }"></div>
    data() {
      return {
        isActive: true,
      }
    }


    Где pb-2 это любой класс из tailwind.

    Классы tailwind доступны глобально, поэтому в шаблоне Vue вам надо думать о них, как о видимых классах внутри шаблона.

    В итоге все, что Вам остаётся это привязать логическую переменную к названию класса внутри шаблона.

    Запись ‘pb-2’: isActive буквально означает: «повесь мне класс pb-2, ЕСЛИ переменная isActive истинная».

    Можно делать и более интересные штуки, например:

    <div :class="{ ‘pb-${size}’: isActive }"></div>
    
    props: {
        size: {
            type: string,
            default: 4,
        },
    data() {
      return {
        isActive: true,
      }
    }
    Ответ написан
    6 комментариев
  • Как удалить addEventListener?

    @zxf
    Для таких ситуаций лучше вешать событие открытия на сам select или лейбл связанный с инпутом. Одним словом, на элемент, по которому раскрывается список. В методе обработчике этого @click реализовывать привязку и отвязку слушателя к/от глобальному объекту (window). Обработчик этого глобального слушателя должен проверять, на каком элементе произошло событие и вызывать соответствующие методы. И не забывайте о всплытии событий. Чтобы избежать всплытия во Vue существует модификатор .stop (@click.stop).
    Ответ написан