[ヴューが警告]：あなたは、コンポーネントのレンダリング機能で無限の更新ループを有することができます

[Vue warn]: You may have an infinite update loop in a component render function

これは、これまでにない遭遇した、非常に奇妙です。私が行うには、プロジェクト、Daoyeハオを主導している場合は、ゆっくりとデバッグです。しかし、なぜ、同社のプロジェクトでこの問題に遭遇し、建築会社のプロジェクトは非常に複雑で、私は完全には把握していませんでした。もっと迷惑なので、複雑なシステムのため、デバッグは非常に困難である、ということで、プラス何のテストフレームワーク、この紛れもああはありません......

良いシブシリコン、3、空腹に、結果は低血糖状態に陥り、ちょうど瞬間午後4時、雨で本当にリーキー家ごとに小さなボートと逆風を打つ、生ので、空腹の私の脳ジェン......

しかし、最終的に私には、Google +がそれをデバッグしました。この事実は、中に v-for メソッドまたはプロパティがVM上で計算されている場合。$データは、オブジェクトとしてのサイクルを変更するために無限ループを誘導することが可能で、理論的には、操作属性、サイクル。このとき、Vueが（本当に無限ループを持っていない）の警告を発行します。

したがって、例えば、その中の成分は、 :checked + <label> 実施のボタン群。それは次の機能があります。

可能なパケットが自分に設定する必要があるようにするには、 name プロパティを
使用できるようにする <label> 制御を <input>、必要がする <input> 設定します id
ボタンを削除することができます

だから私はそうすることを選択します。

<template>
<div>
  <template v-for="(item, index) in items">
    <input type="checkbox" :name="'my-component-' + selfIndex" :id="getID">
    <label :for="getID(false)">
    <button type="button" @click="remove(index)">&times;</button>
  </template>
</div>
</template>

<script>
let count = 0;

export default {
  data() {
    return {
      selfIndex: 0,
      itemIndex: 0,
    }
  },
  methods: {
    getID(increase = true) { // 注意，问题就出在这里
      if (increase) {
        this.itemIndex++;
      }
      return `my-component-${this.selfIndex}-${this.itemIndex}`;
    },
  },
  beforeMount() {
    this.selfIndex = count;
    count++;
  }
}
</script>

ここでは、ユニークなIDを生成するために、私はすべての各サイクルです選択している vm.itemIndex++という問題の前に表示される、隠された危険性があります。

問題の解決策、2個、一方が存在することで itemIndex 、それが直接アセンブリに関連していないように、ローカル変数の上に配置され、他方は、書き込みグローバルユニークID生成機能、資料室です。原理は同じです。次のように繰り返された部分は、書かれた実質的に変更されません。

オプション1

<script>
let count = 0;
let itemCount = 0; // 把元素计数器放在这里

export default {
  methods: {
    getID(increase = true) {
      if (increase) {
        itemCount++;
      }
      return `my-component-${this.selfIndex}-${itemCount}`;
    }
  }
};
</script>

オプションII

// helper.js 生成唯一 id
let count = 0;
export default function uniqueID(increase = true) {
  if (increase) {
    count++;
  }
  return `prefix-${count}`;
}

// 原来的组件
import uniqueID from './helper';

export default {
  methods: {
    getID(increase = true) {
      let id = uniqueID(increase);
      return `my-component-${this.selfIndex}-${id}`;
    }
  }
}

フェイス質問[広告]肉の先生が説明します

私の新しい講堂が行にされている宣伝する方法は、次火曜日放送されます。

今回は私が学生に、すべての講義を自分自身に詳細に蓄積面の質問を紹介することにしました。、問題は、捜査の方向を解決する答えを聞くことを望んで一連の目的からは、どのように多くの完全な開示になってきたかについての評価などの結果を知っています。私たちは聞いて信じて、より明確な方向毎日学習することができます。

それは私たちが、歓迎、まだ販売75％オフでここにリンクします。