vue.js 2.0：バックエンドからajax経由で取得したデータを表示できません

Question

vue.jsを使用しています2.0、このデモは動作しています。私は、AJAXリクエストを送信し、バックエンドからデータを取得するためにaxios（https://github.com/mzabriskie/axios）を使用

<div class="container" id="app"> 
    <ol> 
     <li v-for="(todo,index) in todos"> 
      {{ index }} {{ todo.text }} 
     </li> 
    </ol> 

</div> 

<script> 
    new Vue({ 
     el: '#app', 
     data: { 
      todos: [ 
       { text: 'Learn JavaScript' }, 
       { text: 'Learn Vue' }, 
       { text: 'Build something awesome' } 
      ] 
     } 
    }); 
</script> 

、私は、コンソール内のデータを見ることができますが、データはビューに表示することはできません。

<div class="container" id="app"> 
    <ol> 
     <li v-for="(todo,index) in todos"> 
      {{ index }} {{ todo.text }} 
     </li> 
    </ol> 

</div> 

<script> 
    new Vue({ 
     el: '#app', 
     data: { 
      todos: [] 
     }, 
     mounted: function() { 
      this.$nextTick(function() { 
       axios.get('/articles') 
        .then(function (response) { 
         console.log(response); 
         this.todos = response.data; 
        }) 
        .catch(function (error) { 
         console.log(error); 
        }); 
      }); 
     } 
    }); 
</script> 

そして、以下のシミュレーションが働いています。私は、あなたが "これ" の前にaxios.get（自己= this）を保存し、その後 this.todos = response.dataを変更する必要があると思う

<div class="container" id="app"> 
     <ol> 
      <li v-for="(todo,index) in todos"> 
       {{ index }} {{ todo.text }} 
      </li> 
     </ol> 

    </div> 

    <script> 
     new Vue({ 
      el: '#app', 
      data: { 
       todos: [] 
      }, 
      mounted: function() { 
       this.$nextTick(function() { 
        var arr=[ 
         { text: 'Learn JavaScript' }, 
         { text: 'Learn Vue' }, 
         { text: 'Build something awesome' } 
        ]; 
        this.todos = arr; 
       }); 
      } 
     }); 
    </script> 

Answer 1

。 〜 self.todos = response.data;