Question

vue版本：2.1.1

我收到以下错误，仅在生产设置中：

TypeError：无法读取属性＆＃39;长度＆＃39;未定义的

在s.updated（vue.common.js：6077）

at we（vue.common.js：2754）

在De（vue.common.js：2831）

在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是静态数据，它作为道具传递给该组件。

Answer 1

对我来说，我意外地在transition-group中生了一个孩子，这将导致错误。我只有在其中有一个以上的孩子时才使用过渡组，这才解决了问题。

仅当我们尝试转到另一个页面并触发update()时，错误才会显示。

Answer 2

我已升级到最新版本：2.2.1并且在升级后没有看到该错误，似乎他们可能已修复此版本。

Answer 3

在访问长度之前确保children存在。

更改

if (!children.length || !this.hasMove(children[0].elm, moveClass)) {

到

if (!children || !children.length || !this.hasMove(children[0].elm, moveClass)) {

得到错误：＆＃34;无法读取属性＆＃39;长度＆＃39;未定义＆＃34;仅在生产设置中

3 个答案: