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" /> </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?

via Chebli Mohamed