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


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))
  }}

  })
<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>



A: 

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;
    for (let i = 0; i < leng_items; i++) {
      setTimeout(() => {
        this.menuItems[i].isActive = false;
      }, 2000 * (i + 1))
    }
  }
})
.opacity_deactivated {
  color: red;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<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>


