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

Posted 2023-03-14

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

【英文标题】：v-if condition get error message in vue.js file

【发布时间】：2021-12-31 08:42:35

【问题描述】：

使用 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'.

我该如何解决这个问题？

【问题讨论】：

这能回答你的问题吗？ Correct way to handle v-if with v-for in Vue

【参考方案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>

【讨论】：

:key="i 代码段仍然出错