仅在生产设置中出现错误:“无法读取未定义的属性‘长度’”
2017-03-10
2064
vue 版本:2.1.1
我收到以下错误,仅在生产设置中:
TypeError: Cannot read property 'length' of undefined
at s.updated (vue.common.js:6077)
at we (vue.common.js:2754)
at De (vue.common.js:2831)
at Array. (vue.common.js:473)
at e (vue.common.js:422)
这在本地设置中完美运行,但仅在生产中我收到此错误。当我从 chrome 控制台转到
s.updated (vue.common.js:6077)
行时,我得到以下代码:
var TransitionGroup = {
props: props,
render: function render (h) {
var tag = this.tag || this.$vnode.data.tag || 'span';
var map = Object.create(null);
var prevChildren = this.prevChildren = this.children;
var rawChildren = this.$slots.default || [];
var children = this.children = [];
var transitionData = extractTransitionData(this);
for (var i = 0; i < rawChildren.length; i++) {
var c = rawChildren[i];
if (c.tag) {
if (c.key != null && String(c.key).indexOf('__vlist') !== 0) {
children.push(c);
map[c.key] = c
;(c.data || (c.data = {})).transition = transitionData;
} else if (process.env.NODE_ENV !== 'production') {
var opts = c.componentOptions;
var name = opts
? (opts.Ctor.options.name || opts.tag)
: c.tag;
warn(("<transition-group> children must be keyed: <" + name + ">"));
}
}
}
if (prevChildren) {
var kept = [];
var removed = [];
for (var i$1 = 0; i$1 < prevChildren.length; i$1++) {
var c$1 = prevChildren[i$1];
c$1.data.transition = transitionData;
c$1.data.pos = c$1.elm.getBoundingClientRect();
if (map[c$1.key]) {
kept.push(c$1);
} else {
removed.push(c$1);
}
}
this.kept = h(tag, null, kept);
this.removed = removed;
}
return h(tag, null, children)
},
beforeUpdate: function beforeUpdate () {
// force removing pass
this.__patch__(
this._vnode,
this.kept,
false, // hydrating
true // removeOnly (!important, avoids unnecessary moves)
);
this._vnode = this.kept;
},
updated: function updated () {
var children = this.prevChildren;
var moveClass = this.moveClass || ((this.name || 'v') + '-move');
if (!children.length || !this.hasMove(children[0].elm, moveClass)) { // <=== This is the line throwing error
return
}
我在 repo 中有很多代码,涉及多个组件,因此不确定要在这里放什么代码来帮助社区调试。
所需代码 :
我只在其中一个组件中使用
transition-group
,该组件在导航到此页面之前正在使用:
<transition-group tag="ul" name="prod-covered" class="prod-box">
<li :key="index" v-for="(prod, index) in prods" v-if="prod" class="prod">{{prod}}</li>
</transition-group>
这里的 prods 是作为 props 传递给该组件的静态数据。
3个回答
对我来说,我意外地在
transition-group
中放置了 1 个子项,这会导致错误。我只在 transition-group 中有多个子项时才使用它,这样就解决了问题。
只有当我们尝试转到其他页面并触发
update()
时,才会显示错误。
Zoe Edwards
2018-08-09
我升级到了最新版本:
2.2.1
,升级后没有看到该错误,似乎他们可能已经在此版本中修复了该问题。
Saurabh
2017-03-10
确保在访问长度之前
children
存在。
将
if (!children.length || !this.hasMove(children[0].elm, moveClass)) {
更改为
if (!children || !children.length || !this.hasMove(children[0].elm, moveClass)) {
LarryBattle
2017-09-01