Как добавить класс элементу Vue.js

174

06 января 2021, 23:40

я свсем новичек в vue, столкнулся с маленькой проблемой, буду рад любой помощи. Я использую библиотеку vue-scrollto, в документации нашел описаный ниже метод OnDone, где я и добавляю целевому єлементу нужный класс.

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

a.nav-item(href="#item-1" v-scroll-to="{el: '#item-1', onDone: onDone}").scrollactive-item
methods: {
onDone: function(element) {
  console.log(element)
  element.classList.add('activeItem');
},

Answer 1

Вы можете сохранять ссылку на текущий активный элемент в data, и при прокрутке к другому элементу сначала удалять класс activeItem у этого элемента, а потом записывать ссылку на него в data и назначать ему класс activeItem.

Это может выглядеть как-то так:

data() {
    return {
        activeElement: undefined,
    }
},
methods: {
    onDone(el) {
        if (this.activeElement) {
            this.activeElement.classList.remove("activeItem")
        }
        this.activeElement = el;
        this.activeElement.classList.add("activeItem")
    }
},

Попробуйте так.

Удачи!