CODEWITHSUNDEEP
javascriptvue.jslaravel-5
Narakaya
Narakaya

Reputation: 393

v-if condition get error message in vue.js file

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

Answers (1)

GMKHussain
GMKHussain

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

Related Questions