正文 

当前位置： 首页 > 知识 >

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

     2023-03-14     44

关键词：

【中文标题】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 &amp;&amp; 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 代码段仍然出错

vue.js条件渲染

v-if：在字符串模板中，如Handlebars，我们得像这样写一个条件块：{{#ifok}}<!--Handlebars模板--><h1>Yes</h1>{{/if}}在Vue.js，我们使用v-if指令实现同样的功能：<h1v-if="ok">Yes</h1>因为v-if是一个指令，需要将它添加到一... 查看详情

vue.js条件与循环(代码片段)

来源：阿里云大学——开发者课堂——Vue.js自学手册 v-if条件判断使用v-if指令：v-if指令在元素和template中使用v-if指令：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Vue测试实例-阿里云大学( 查看详情

表格中的 vue.js 条件渲染

】表格中的vue.js条件渲染【英文标题】：vue.jsconditionalrenderingintables【发布时间】：2016-12-0119:32:06【问题描述】：我有一个由vue填充的表格，如果有数据，我想在其中显示行，如果没有数据，我想显示“无结果”的行。这是jsfiddle... 查看详情

Vue js v-if在共享切换按钮上进行条件渲染

】Vuejsv-if在共享切换按钮上进行条件渲染【英文标题】：Vuejsv-ifcondicionalrenderingonasharedtogglebutton【发布时间】：2019-02-0720:55:36【问题描述】：//PARENTCOMPONENT<template>....<divclass="input-wrapper">//Togglebuttoncontainer<labelclass= 查看详情

如何在 Vue.js 插槽中使用条件渲染？

】如何在Vue.js插槽中使用条件渲染？【英文标题】：HowtouseconditionalrenderingwithVue.jsslots?【发布时间】：2020-11-1523:51:37【问题描述】：如何使用v-if的结果在Vue中渲染两个不同的组件？如果重要的话，我也在尝试使用v-for渲染TreeView... 查看详情

如何使用 vue js html 中的数组检查 v-if 条件？

】如何使用vuejshtml中的数组检查v-if条件？【英文标题】：Howtocheckv-ifconditionwithaarrrayinvuejshtml?【发布时间】：2018-09-1705:35:19【问题描述】：我正在从select中选择多个选项，并根据我需要动态添加行的选定选项。怎么可能。如果我... 查看详情

v-show与v-if区别

关于条件渲染所谓条件渲染，就是根据不同的条件，使用不同的模板来生成html。在Vue.js中，使用v-if和v-show指令来控制条件渲染。区别v-show会在app初始化的时候编译并且渲染，并且在之后一直存在。当切换v-show模块时，只是简单... 查看详情

包含 Vue.js v-if 和 v-for 指令的 HTML 标签在加载时闪烁

...过下面的表单订阅电子邮件地址并显示一些消息（状态和错误）。我特别使用指令v-if和v-for来显示错误和两 查看详情

vue条件渲染

v-if在字符串模板中，如Handlebars，我们得像这样写一个条件块：<!--Handlebars模板-->{{#ifok}}<h1>Yes</h1>{{/if}}在Vue.js，我们使用v-if指令实现同样的功能：<h1v-if="ok">Yes</h1>也可以用v-else添加一个“else”块：<h1v-if=... 查看详情

为啥在 vue.js 中使用 v-if 时我的 API 数据显示为未定义？

】为啥在vue.js中使用v-if时我的API数据显示为未定义？【英文标题】：WhydoesmyAPIdatashowupasundefinedwhenusingav-ifinvue.js?为什么在vue.js中使用v-if时我的API数据显示为未定义？【发布时间】：2021-06-1711:36:23【问题描述】：模板<template>&... 查看详情

vue中v-show与v-if的区别

...的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染， 查看详情

vue.2.0.5-条件渲染

v-if在字符串模板中，如Handlebars，我们得像这样写一个条件块：<!--Handlebars模板-->{{#ifok}}<h1>Yes</h1>{{/if}}在Vue.js，我们使用 v-if 指令实现同样的功能：<h1v-if="ok">Yes</h1>也可以用 v-else 添加一个“ 查看详情

在带有条件语句的 while 循环中放置错误消息

】在带有条件语句的while循环中放置错误消息【英文标题】：placementsofanerrormessageinwhileloopwithconditionalstatements【发布时间】：2014-06-1412:00:00【问题描述】：此脚本每5秒检查一次文件是否存在，仅持续30秒。脚本等待文件出现如果... 查看详情

v-for 和 v-if 在 vue.js 中不能一起工作

】v-for和v-if在vue.js中不能一起工作【英文标题】：v-forandv-ifnotworkingtogetherinvue.js【发布时间】：2018-08-0216:03:18【问题描述】：一个表单用于提交文本和两个选项告诉vue在哪一列显示文本。当col2单选按钮被选中时，提交的文本应该... 查看详情

vue.js学习笔记：在元素和template中使用v-if指令

f指令语法比较简单，直接上代码：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title></title><scriptsrc="https://cdn.bootc 查看详情

从自定义 .js 文件访问应用程序上下文以获取语言环境消息

】从自定义.js文件访问应用程序上下文以获取语言环境消息【英文标题】：Accessingappcontextfromcustom.jsfilesforfetchinglocalemessages【发布时间】：2020-10-1304:56:46【问题描述】：我正在使用Nuxt.js在s-s-r模式下构建Vue.js应用程序。我的项目... 查看详情

vue使用v-ifv-show页面闪烁，div闪现的解决方法(代码片段)

...if之中的模板也可能包括数据绑定或子组件。v-if是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第... 查看详情

vue报错createscriptvm.js139

...中的一个错误消息，它可能是由于不正确的代码，缺失的文件或者安装依赖项导致的。你可以尝试搜索这个错误消息以获取更多相关信息。 查看详情