テンプレートは、私はテンプレートとデータをレンダリングすることができないvue.jsこのデモで

Question

1. 、（https://jsfiddle.net/ccforward/fa35a2cc/）にオブジェクトによってレンダリングすることができないresultWrong I場合、このデモ、（https://jsfiddle.net/ccforward/zoo6xzck/）で{}

2. に等しいです非同期データを保存するために一時変数を使用し、その後、私は結果を取得し、私は方法でgetRightData()という名前の別の関数を追加した場合、テンプレートに

3. をレンダリングすることができ、その後、getWrongData()は働くことができ、テンプレートをレンダリングすることができます。 リンク：私はgetRightData()メソッドを削除した場合https://jsfiddle.net/ccforward/7f42owpc/4/

4. 、そしてgetWrongData()が動作することはできません。 リンク：https://jsfiddle.net/ccforward/7f42owpc/3/

Answer 1

Vueのcannot detect properties that are added dynamicallyあなたがsetを使用してそれらを追加しない限り、オブジェクトへ。

this.$setを使用して、空のオブジェクトにプロパティを正しく追加する最初のfiddle updatedです。

デモの場合、インデックスを使用してプロパティを追加し、VueがDOMを更新する必要があることを知らないため、最初のデモは機能しません。

2番目のデモは、基本値resultRightが完全に異なる値に設定されているために機能します。 resultRightは無効な値で、別の値に変更すると、VueはDOMを更新する必要があることを認識します。

3番目のデモは動作すると表示されますが、resultRightが変更され、反応するため、VueはDOMを更新することがわかっているため動作します。 resultWrongが同時にレンダリングされますが、のみです.VueはresultRightの変更に基づいてレンダリングしたためです。

最初のデモが失敗したのと同じ理由で4番目のデモが失敗します。 resultWrongは新しいプロパティを取得しますが、Vueではにはこれらのプロパティについてのが分かりません。 resultRightをtmpに変更したときと同じように、オブジェクト参照を変更していないため、VueはDOMを更新する必要はありません。