Как я могу использовать v-for с вычисляемой переменной


Как я могу использовать v-for с вычисляемой переменной

03.12.2020 08:12:03 Просмотров 58 Источник

Я хочу использовать v-for nav items через мои полномочия и другие вещи. это мой код.

 <template v-for="(subItem, index2) in item.children">
     <v-list-item sub-group  link :to="subItem.link" exact v-if="item.auth === true"  :key="index + '_sub_' + index2">
         <v-list-item-title v-text="subItem.title" ></v-list-item-title>
     </v-list-item>
</template>

я хочу отключить клик v-if="item.auth === true

вот мой объект

children: [
    {name:'menu1', title:'menu1', link:'/company/menu1', auth: () => {return this.currentNav===0 }}, // not work
    {name:'menu2', title:'menu2', link:'/company/menu2', auth: true}, // work
    {name:'menu3', title:'menu3', link:'/company/menu3', auth: this.MyInfo.Auth.menu3Auth === true }, // work, but not changed menu visible on this.MyInfo.Auth.menu3Auth value change.
    {name:'menu4', title:'menu4', link:'/company/menu4', auth: () => {return this.currentNav===4 || this.MyInfo.Auth.menu3Auth === true }}, 
    {name:'menu5', title:'menu5', link:'/company/menu5', auth: () => {return this.MyInfo.Auth.menu5Auth === false && this.MyInfo.Auth.menu3Auth === true  }
}

но это не сработало, как я думал

как я могу это исправить?

У вопроса есть решение - Посмотреть?

Ответы - Как я могу использовать v-for с вычисляемой переменной / How can I use v-for with computed variable

Mr.

03.12.2020 08:55:38

Чтобы выполнить условия для v-for, переместите их в вычисляемое свойство:

computed: {
  authItems() {
    return this.items.children.filter((x) => {
      if (typeof x.auth === 'function') {
        return x.auth();
      }
      return x.auth === true;
    });
  },
},

затем

 <template v-for="(subItem, index2) in authItems">
     <v-list-item sub-group  link :to="subItem.link" exact :key="index + '_sub_' + index2">
         <v-list-item-title v-text="subItem.title" ></v-list-item-title>
     </v-list-item>
</template>

Именно так можно лечить болезни. С другой стороны, вы можете сделать что-то подобное, но это не так ясно:

 <template v-for="(subItem, index2) in item.children.filter((x) => x.auth === true)">
     <v-list-item sub-group  link :to="subItem.link" exact :key="index + '_sub_' + index2">
         <v-list-item-title v-text="subItem.title" ></v-list-item-title>
     </v-list-item>
</template>
Помочь в развитии проекта:
Закрыть X