데이터가 변경된 후 Vue v-for 목록이 업데이트되지 않습니다.

Question

아이디어가 간단합니다. Vue 인스턴스는 API에서 그룹을로드합니다. 이 그룹은 v-for 구문을 사용하여 표시됩니다.

그룹 데이터가 올바르게 포맷되고 v-for 목록을 업데이트해야하는 .push 함수를 사용하여 app.groups에 추가됩니다.

그러나 v-for 목록은 업데이트되지 않습니다.

v-for = "그룹에있는 그룹"(외부에로드 됨)을 v-for = "그룹의 사람들"(이미 앱에 있음)으로 변경하면 출력됩니다.

HTML

<div id="app" class="col-md-8 col-md-offset-2"> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Realtime Socket Chat</div> 
       <div class="panel-body" v-if="dataReady" v-for="group in groups"> @{{ group.name }} 
        <a v-bind:href="group.link" class="pull-right"> 
         <div class="btn btn-xs btn-primary"> 
          Join 
         </div> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 

뷰

var app = new Vue({ 
    el: "#app", 
    data: { 
     groups: [], 
     people: [{name: 'hi'}, {name: 'lol'}] 
    }, 
    mounted: function() { 
     this.load() 
    }, 
    methods: { 
     load: function() { 
      axios.get('http://example.com/groups') 
       .then(function (response) { 

       console.log(response.data.groups); 

       response.data.groups.forEach(function(group) { 
        app.groups.push(group); 
       }); 

       // app.groups.forEach(function (group) { 
       // group.link = '/g/' + group.id + '/join'; 
       // }); 
       // console.log(response.data.groups); 

       console.log(this.groups); //outputs [{...}, {...}] so this.groups is good 
      }) 
      .catch(function (error) { 
       this.errors.push(error); 
       console.log(error); 
      }) 
     } 
    } 

}); 

API

{

"그룹": [ {

"id": 1, 
    "name": "Photography Chat", 
    "created_at": "2017-11-26 08:50:16", 
    "updated_at": "2017-11-26 08:50:16" 
}, 

{ 
    "id": 2, 
    "name": "Media Chat", 
    "created_at": "2017-11-26 08:50:16", 
    "updated_at": "2017-11-26 08:50:16" 
} 

당신의 load 기능이 실행될 때 app이 정의처럼 691,363,210은

]

}

Answer 1

내가 질문에서 남긴 사실을 (나는 그것이 문제가되지 것입니다 가정 때문에) 나는 Laravel 프레임 워크 내에서 작업하고 있음을했다, Laravel은 main.js에서 Vuejs를 자동으로 가져옵니다. Vue가 추가로로드 될 때 멋지지 않습니다. main.js를 제거하고 작동합니다.

Answer 2

보인다 . 그래서, ES6 화살표 함수 구문을 사용하여 load 기능은 다음과 같아야합니다

load: function() { 
    axios.get('http://example.com/groups') 
    .then(response => {  
     let groups = response.data.groups || [] 

     groups.forEach(group => { 
     this.groups.push(group) 
     }) 

     console.log(this.groups) 

    }) 
    .catch(error => { 
     this.errors.push(error) 
     console.log(error) 
    }) 
}