Как я могу использовать v-for с вычисляемой переменной
Я хочу использовать 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
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>
Помочь в развитии проекта: