vue 项目中，访问页面时，前端控制台输出如下所示红色警告信息，Failed to resolve directive: if (found in ＜Log＞ at src/views

努力学编程呀(๑•ี_เ•ี๑)

于 2024-08-28 17:37:06 发布

阅读量425

点赞数 13

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/yhlsunshine/article/details/141642471

版权

项目场景：

背景：

vue 项目中，访问页面时，前端控制台输出如下所示红色警告信息。
vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve directive: if

问题描述

问题：

vue 项目中，访问页面时，前端控制台输出如下所示红色警告信息，相关信息，如下所示：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve directive: if

(found in <Log> at src/views/sys/log.vue)

在这里插入图片描述

原因分析：

提示：这里填写问题的分析：

v-if 的使用

      {
          title: '操作',
          field: 'other',
          minWidth: "100",
          align: 'center',
          slots: {
                default: ({ row }) => {
                      return [
                        <el-button
                                size="mini"
                                plain
                                icon="el-icon-delete"
                                type="danger"
                                **v-if="deletePermission"**
                                onClick={() => this.deleteRow(row)}
                        >删</el-button>
                      ]
                  }
              }
        }

解决方案：

解决方案：

通过检查该页面代码，我们发现是因为在使用 v-if 时，使用不当造成的。
我们在表格 columns 中，使用 v-show 控制是否显示就可以啦！

      {
          title: '操作',
          field: 'other',
          minWidth: "100",
          align: 'center',
          slots: {
                default: ({ row }) => {
                      return [
                        <el-button
                                size="mini"
                                plain
                                icon="el-icon-delete"
                                type="danger"
                                **v-show={this.deletePermission? true:false}**
                                onClick={() => this.deleteRow(row)}
                        >删</el-button>
                      ]
                  }
              }
        }

问题解决~~~