Как в Vue сделать поочередное удаление класса у элементов списка?

Question

[blockso]

Всем привет. Помогите, пожалуйста, с кодом )
Есть список с классом который устанавливает тегу спиcка opacity: 0

<ul class="header_navmenu">
  <li class="nav_menu-item" v-bind:class="{opacity_deactivated:isActive}"><a href="" target="_blank">1</a></li>
  <li class="nav_menu-item" v-bind:class="{opacity_deactivated:isActive}"><a href="">2</a></li>
  <li class="nav_menu-item" v-bind:class="{opacity_deactivated:isActive}"><a href="">3</a></li>
  <li class="nav_menu-item" v-bind:class="{opacity_deactivated:isActive}"><a href="">4</a></li>
  <li class="nav_menu-item" v-bind:class="{opacity_deactivated:isActive}"><a href="">4</a></li>
  <li class="nav_menu-item" v-bind:class="{opacity_deactivated:isActive}"><a href="">5</a></li>
</ul>

Как с помощью Vue.js с интервалом в 2 секунды по очереди автоматически данный класс с true, перевести в false
Вот код Vue

var app = new Vue({
	el: '#header',
	data:{
		isActive: true
	}
})

Answer 1

[0xD34F]

Непонятно, чем мотивировано неиспользование v-for. Если использовать, будет гораздо проще добиться того, что вы хотите, например:

.hidden {
  opacity: 0;
}

data: () => ({
  items: [
    { text: '...', hidden: true },
    { text: '...', hidden: true },
    ...
  ],
}),
mounted() {
  this.items.forEach((n, i) => {
    setTimeout(() => n.hidden = false, 300 * (i + 1));
  });
},

<li v-for="{ text, hidden } in items" :class="{ hidden }">
  <a href="">{{ text }}</a>
</li>

Comments

[blockso]

Спасибо за пример. С v-for не совсем понимаю как можно реализовать гибкий код. Так как вместо 1,2,3 - в тегах может быть написаны названия страниц,которые будут меняться

[0xD34F]

И в чём проблема? Смысл v-for не в "1,2,3", а в создании элементов на основе данных. Опишите ваши пункты меню в виде массива объектов.

[Sergej]

blockso, Предоставьте json, будет проще понять )

[blockso]

Немного переписал код. Не подскажите как написать функцию по-очередного удаления класса?

<ul class="header_navmenu" id="header">
            <li class="nav_menu-item" 
            v-for="menu_item in menuItems"
            :class="{ opacity_deactivated: menu_item.isActive }">
            <a v-bind:href="menu_item.url" target="_blank">{{ menu_item.name }}</a></li>
          </ul>
var app = new Vue({
	el: '#header',
	data:{
		menuItems:[
        {
          url:'#',
          name:'Блог',
          isActive: true
        },
        {
          url:'#',
          name:'Обо мне',
          isActive: true
        },
        {
          url:'#',
          name:'Навыки',
          isActive: true
        },
        {
          url:'#',
          name:'Блог',
          isActive: true
        },
        {
          url:'#',
          name:'Услуги',
          isActive: true
        },
        {
          url:'#',
          name:'Портфолио',
          isActive: true
        },
        {
          url:'#',
          name:'Контакты',
          isActive: true
        }
		]
	},
	methods:{
		activated: function(){
			this.menuItems.forEach
		}
	}

})

[0xD34F]

Подсказал же уже - смотрите код по ссылке в ответе.

[Владимир Проскурин]

20 таймеров это плохо. Лучше в замыкании оставлять индекс массива, и в таймере просто запускать таймер снова (если элементы не кончились).

[0xD34F]

20 таймеров это плохо. Лучше в замыкании оставлять индекс массива, и в таймере просто запускать таймер снова

А ещё вынести в отдельный метод, сделать устанавливаемое значение и интервал параметрами, блокировать повторные вызовы пока массив не будет полностью обработан... Нет предела совершенству.

[Владимир Проскурин]

0xD34F, Есть так сказать минимальное совершенство.

[Mikola-BLR]

blockso, если количество пунктов меню невелико, то можно это сделать на чистом CSS с анимацией:

Пример