Vue JS에서 HTML이 인식되지 않음 추가 된 객체 및 속성

Question

myApp이라는 Vue 인스턴스가 있습니다.중에 호출되는 loadPlannedAlerts라는 Vue JS 인스턴스에 메소드가 있습니다. AJAX 호출로 JSON 데이터를 먼저 가져온 다음 나중에 JSON 데이터에 추가합니다. 데이터는 {key: 'value, key2: 'value2}' 행을 따라 보이는 키 값 쌍이있는 JSON 객체입니다. 내 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 키 - 값을 끌어 할 수 있고, 난 내 브라우저의 개발 도구의 뷰 플러그인에서 볼 수 있습니다. 그러나 내 메시지 상자에 입력 한 데이터는 findUser 각각에 바인딩되지 않습니다.

누락 된 항목이나 내가 간과하는 작업 순서가 있습니까? 데이터를 추가하기 전에 데이터에 이미 존재하는 다른 것은 바인딩 바인딩입니다.

UPDATE

나는 모든 구성 요소를 변이, 그리고 그 다음에 값을 할당, 어떻게 보일지를 구축 완료되지 않는 일반 키 - 값 쌍을위한 십 년간 달의 해결 방법을 수행하는 경우 , 그럼 잘 작동합니다. 값이 키 - 값 쌍이있는 다른 객체 인 키 - 값 쌍을 지정하려고하면 여전히 작동하지 않습니다.

Answer 1

해당 구성 요소에 대한 data 개체에 myApp.messages이 선행으로 선언되어 있습니까?

각 메시지에 새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; 
}