Удаление классов через 2 секунды. Как исправить ошибку?

Question

[blockso]

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

<ul class="header_navmenu">
            <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_navmenu',
	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
        }
		]
	},
    mounted(){
    var leng_items = this.menuItems.length;
    console.log(leng_items);
    for(var i = 0; i<= leng_items;i++){
      setTimeout(()=>{
        this.menuItems[i].isActive = false;
        console.log(this.menuItems[i])
      },2000 * (i+1))
  }}

	})

Comments

[alex]

к сожалению мой код не работает

код ошибки в студию

Answer 1

[Stockholm Syndrome]

for (var i = 0; i < leng_items; i++) {
  setTimeout((i) => {
    this.menuItems[i].isActive = false;
  }, 2000 * (i + 1), i); 
}

Answer 2

[Islam Ibakaev]

раз уж выключаешь для всех li, не лучше ли isActive вынести в data, то есть

data: { 
  isMenuItemActive: true,  
  //...ниже menuItems
},

mounted() {
    setTimeout(() => {
        this.isMenuItemActive = false;
    }, 2000); 
}

в template

:class="{ opacity_deactivated: isMenuItemActive }">