开发者问题收集

仅在生产设置中出现错误:“无法读取未定义的属性‘长度’”

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