[英]Uncaught TypeError: Cannot read properties of undefined (reading 'deep') when upgrade to vue 3.x
After upgrade the vue to 3.x, the console shows error like this:将 vue 升级到 3.x 后,控制台显示如下错误:
Uncaught TypeError: Cannot read properties of undefined (reading 'deep')
at withDirectives (commons1.js:10679:17)
at Proxy.render (eval at compileToFunction (commons1.js:40198:21), <anonymous>:36:7)
at renderComponentRoot (commons1.js:7874:44)
at ReactiveEffect.componentUpdateFn [as fn] (commons1.js:11968:57)
at ReactiveEffect.run (commons1.js:5819:29)
at setupRenderEffect (commons1.js:12094:9)
at mountComponent (commons1.js:11877:9)
at processComponent (commons1.js:11835:17)
at patch (commons1.js:11436:21)
at render (commons1.js:12579:13)
I have no idea what was happen, think it may be a compatible problem.我不知道发生了什么,认为这可能是一个兼容问题。 I did not know how to found where is going wrong.
我不知道如何找到哪里出了问题。 I could not know the line where is going wrong from the output js(from this error I could not know where is going wrong with the source code), this is the code looks like:
我不知道 output js 哪里出了问题(从这个错误我不知道源代码哪里出了问题),代码如下:
/**
* Adds directives to a VNode.
*/
function withDirectives(vnode, directives) {
const internalInstance = currentRenderingInstance;
if (internalInstance === null) {
( true) && warn(`withDirectives can only be used inside render functions.`);
return vnode;
}
const instance = internalInstance.proxy;
const bindings = vnode.dirs || (vnode.dirs = []);
for (let i = 0; i < directives.length; i++) {
let [dir, value, arg, modifiers = _vue_shared__WEBPACK_IMPORTED_MODULE_1__.EMPTY_OBJ] = directives[i];
if ((0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.isFunction)(dir)) {
dir = {
mounted: dir,
updated: dir
};
}
// here throw the error message
if (dir.deep) {
traverse(value);
}
bindings.push({
dir,
instance,
value,
oldValue: void 0,
arg,
modifiers
});
}
return vnode;
}
when running into the dir.deep
line, throw this error, what should I do to fix this problem?当运行到
dir.deep
行时,抛出这个错误,我应该怎么做才能解决这个问题? I tried to search from Google seems no one facing the same problem.我试图从谷歌搜索似乎没有人面临同样的问题。
for me it was a typo in v-model对我来说,这是 v-model 中的错字
<input type="text" class="form-control" v-moel="newUser.name">
after I fixed the typo v-moel
to v-model
, it got fixed在我将错字
v-moel
为v-model
之后,它得到了修复
I had this issue today and I found out the problem was because I was trying to use an unregistered directive.我今天遇到了这个问题,我发现问题是因为我试图使用未注册的指令。
If you put a breakpoint right the invocation before where the error happens, in your case at Proxy.render (eval at compileToFunction (commons1.js:40198:21), <anonymous>:36:7)
you will find something like const _directive_focus = _resolveDirective("focus");
如果你在错误发生之前的调用中放置一个断点,在你的情况下
at Proxy.render (eval at compileToFunction (commons1.js:40198:21), <anonymous>:36:7)
你会发现类似const _directive_focus = _resolveDirective("focus");
and then you know what directive you are missing然后你知道你缺少什么指令
For me, it was because after a migration from Vue2 to Vue3, a directive called v-focus
was used on a <input/>
element.对我来说,这是因为在从 Vue2 迁移到 Vue3 之后,在
<input/>
元素上使用了一个名为v-focus
的指令。 I don't know if this is a breaking change from Vue3 or if I missed something, but someone explained here how you can reimplement it.我不知道这是否是 Vue3 的重大变化,或者我错过了什么,但有人在这里解释了如何重新实现它。
for me it was a typo in v-on对我来说,这是 v-on 的错字
<CartItem
v-for="item in cartItems" :key="item.id" :item="item"
v-von:remove-item="removeFromCart($event)">
</CartItem>
after i fixed the typo v-von to v-on, it got fixed在我将错字 v-von 修复为 v-on 后,它得到了修复
I had the same error on Vue3.我在 Vue3 上遇到了同样的错误。 You have to add directive to app before mount.
您必须在安装之前向应用程序添加指令。
creatApp(X).directive('Y',{...}).mount('#Z')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.