Reputation: 393
working with Laravel + Vue Project. and I have following code segments in the mainapp.vue file
<div class="_1side_menu_list">
<ul class="_1side_menu_list_ul">
<li v-for="(menuItem, i) in permission" :key="i" v-if="permission.length && menuItem.read">
<router-link :to="'/'+menuItem.name"><Icon type="ios-speedometer" /> {{menuItem.resourceName}}</router-link>
</li>
<li><a href="/logout"><Icon type="ios-speedometer" /> Logout</a></li>
</ul>
</div>
</div>
</div>
but in the following line v-if="permission.length && menuItem.read"
highlighting in the id and display following error message [vue/no-use-v-if-with-v-for]
| The 'permission' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.
how could I fix this problem?
Upvotes: 0
Views: 1690
Reputation: 4719
v-if
cant be use with v-for
see example i used template to avoid render extra element
1st use v-for
and inside this loop use v-if
<div class="_1side_menu_list">
<ul class="_1side_menu_list_ul">
<template v-for="(menuItem, i) in permission" :key="i">
<li v-if="permission.length && menuItem.read">
<router-link :to="'/'+menuItem.name">
<Icon type="ios-speedometer" /> {{menuItem.resourceName}}
</router-link>
</li>
</template>
</ul>
</div>
Upvotes: 1