Vue JSがHTMLで追加されたオブジェクトとプロパティを認識しない

Question

私はmyAppと呼ばれるVueインスタンスを持っています。私はmountedの間に呼び出されるloadPlannedAlertsと呼ばれるVue JSインスタンスにメソッドを持っています。これはAJAX呼び出しで、まずJSONデータを取得し、その後に追加します。データはキー値のペアを持つJSONオブジェクトで、{key: 'value, key2: 'value2}'の行に沿って見えます。私のHTMLで

loadPlannedAlerts: function() { 
     $.ajax({ 
      method: 'GET', 
      url: '/get-my-data', 
      success: function(data) { 
       myApp.messages = JSON.parse(data); 
       for (var i = 0; i < myApp.messages.length; i++) { 
        myApp.messages[i].findUser = ''; 
       } 
      } 
     }); 
} 

、私はこのメッセージデータを表示するv-forループを持っています。何らかの理由で

<div v-for="(message, index) in messages"> 
    <input type="text" name="user" v-model="message.findUser"> 
</div> 

、私は自分のブラウザのコンソールに追加findUserキーと値をプルアップすることができ、そして私も、私のブラウザの開発ツールVueのプラグインでそれを見ることができます。しかし、メッセージボックスに入力されたデータは、findUserのそれぞれにバインドされていません。

私には何かがありませんか、または私が見落としている操作の順序はありますか？私がそれを追加する前にデータに既に存在していたものはすべて罰金です。

UPDATE

私はそれに値を割り当て、その後、すべてのコンポーネントを変異させ、そしてそれがどのように見えるかの構築を完了していない正規のキーと値のペアのためのディケイド月のソリューションに従っている場合、それはうまく動作します。値がキーと値のペアを持つ別のオブジェクトであるキーと値のペアを割り当てようとすると、それでも機能しません。

Answer 1

myApp.messagesは、そのコンポーネントのdataオブジェクトで先に宣言されていますか？

新しいfindUserというプロパティを各メッセージに追加しているようです。 Vueはこれを検出できません（Change Detection Caveats参照）。ペイロードをの前に変更して、それをコンポーネントに割り当てます（この時点で、Vueは反応するようにします）。

success: function(data) { 
    const messages = JSON.parse(data); 

    for (var i = 0; i < messages.length; i++) { 
    messages[i].findUser = ''; 
    } 

    // Do this last 
    myApp.messages = messages; 
}