データが変更された後に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> 

Vueの

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" 
} 

]

}

Answer 1

事実は、私はLaravelフレームワーク内で働いているということでした、 Laravelはmain.js内のVuejsを自動的にインポートします。 Vueが追加でロードされてもうまくいきません。私はmain.jsを削除して動作します。

Answer 2

あなたload機能が実行されたときにappが定義されていないように思えます。だから、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) 
    }) 
}