应用笔记 · 2023年3月31日

vue控制台警告Runtime directive used on component with non-element root node.

我在使用el-dropdown时出现问题,原因是给 dropdown item 增加了v-auth 属性

<el-dropdown-item icon=”ele-Edit” @click=”genPath(item)” v-auth=”auth:edit”>
根本原因在于自定义指令必须放在原生元素上面,不能放到组件上。

控制台警告提示信息
控制台警告Runtime directive used on component with non-element root node. The directives will not function as intended.

原因和解决
原因
意思是自定义指令不能放到组件上,而是要放到自有的元素上,也就是这里用到的v-show不能放在自定义组件上,而是放在原来就有的标签上,所以这里套了一层div
比如之前的是这样子,v-show指令用在了自定义组件ImageAddR身上,就警告了
<ImageAddR ref=”ImageAddR” v-show=”materialType === ‘image'”></ImageAddR>

解决
外面套一层不是自定义组件的东东就可以,我这里套了一层div,你也可以嵌套一层template
<div v-show=”materialType === ‘image'”>
<ImageAddR ref=”ImageAddR” ></ImageAddR>
</div>

或者

<template v-show=”materialType === ‘image'”>
<ImageAddR ref=”ImageAddR” ></ImageAddR>
</template>