v-if 条件在 vue.js 文件中获取错误消息

Question

使用 Laravel + Vue 项目。我在 mainapp.vue 文件中有以下代码段

<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>

但在下面的行中v-if="permission.length && menuItem.read" 在id 中突出显示并显示以下错误消息[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'.

我该如何解决这个问题？

Answer 1

v-if 不能与v-for 一起使用

查看我使用模板来避免渲染额外元素的示例

第一次使用v-for，在这个循环中使用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>