Как на vue.js написать код для fullpage добавление css классов?

Question

[Sergeyjed]

плагин fullpage для vue, есть такой же на jquery и часть самописного кода переношу на vue.

jquery
...
				onLeave: function(index, nextIndex, direction){
					if(direction == "up"){
						$(".section").removeClass("down next prev")
						$(".main-deerpfarm .section:nth-child("+nextIndex+")").addClass("up")
						$(".main-deerpfarm .section:nth-child("+nextIndex+")").next().addClass("next up")
						$(".main-deerpfarm .section:nth-child("+nextIndex+")").prev().addClass("prev up")
					}else{
						$(".section").removeClass("up next prev")
						$(".main-deerpfarm .section:nth-child("+nextIndex+")").addClass("down animate-show")
						$(".main-deerpfarm .section:nth-child("+nextIndex+")").next().addClass("next down")
						$(".main-deerpfarm .section:nth-child("+nextIndex+")").prev().addClass("prev down")
					}
...

По сути мне нужно менять классы при прокрутке колесиком мышки (плагин определяет индекс блоков и направление прокрутки) Как записать для vue то что делает код выше?

VUE.js
...
        onLeave: function(index, nextIndex, direction){
          if(direction == 'up') {
         // ???????
          } else {
         // ???????
}

codepen https://codepen.io/serg-style/pen/wRYYLL?editors=1111

Answer 1

[Сергей delphinpro]

data(){
  return {
    classDir: '',
  }
}
onLeave(i, ni, dir){
  this.classDir = dir;
}
<div :class="{up: classDir}">

Comments

[Sergeyjed]

Добавляет класс один раз и ошибка TypeError: e is undefined перестает работать все

[Сергей delphinpro]

Sergeyjed, вы бы в песочнице демку сделали, было бы проще дать конкретный совет по коду.

[Sergeyjed]

Сергей delphinpro, Добавил ссылку на кодпен

[Klein Maximus]

Сергей delphinpro, еще бы как-то убрать определение секций из шаблона в виде копипасты, так было бы вообще идеально.

[Сергей delphinpro]

Sergeyjed, Исправил корректное добавление самих классов, но конфликт в фулл-пейджем остался.
Как вариант можно сделать доп обертку, с которой full-page не взаимодействует. Вот так:
https://codepen.io/delphinpro/pen/qLJLJd?editors=1011

[Сергей delphinpro]

Klein Maximus, Это нормально для слайдеров - использовать слоты для слайдов.
Что касается копипасты, никто не запрещает вывести их циклом v-for, взяв данные из любого хранилища.

Answer 2

[Klein Maximus]

Не пытайтесь манипулировать DOM напрямую, а меняйте данные компонента!
Забудьте уж наконец про этот jQuery-стиль!!!

Comments

[Sergeyjed]

Так вот же и пытаюсь перейти на vue без jquery

[Klein Maximus]

В любом случае, не понятно само задание.
Что Вы, в итоге, хотите получить?
Только не пишите, что Вам нужны какие-то классы у каких-то блоков, поскольку конечный результат должны быть явно не таким.

[Klein Maximus]

Вообще, компонент vue-fullpage под Vue сделан топорно. Сами секции указываются в шаблоне, а их параметры - в коде :( Уж где-то в одном месте должно быть ;)