vuejsでdivでAPI結果を表示

Question

API呼び出しからデータを取得するための動的ボタンを設定しようとしています。しかし、データ配列をテンプレートとdivにプッシュすることはできません。

マイVueJSは次のようになります。

var example = new Vue({ 
    el: '#example', 
    data: function() { 
     return { 
      list: [] 
     } 
    }, 

    methods: { 
    fetchMovies: function (city) { 
     $.getJSON('api/city?city=' + city, function(tasks) { 
      console.log(tasks); // What i receive from API 
      console.log(city); // What is being sent from button 
      this.list = tasks; // API results in to list array 
      this.todos.push(this.newTodoText); // Push results to div 
     }.bind(this)) 
    } 
    } 
}); 

、ボタン、およびテンプレートは次のようになります。クロムのdevのツールで

<div id="example"> 
    <button v-on:click="fetchMovies('stockholm')">Greet</button> 
</div> 

<div id="exampleList"> 
    <tasks></tasks> 
</div> 

<template id="tasks-template"> 
    <div> 
     <h1>vue grjer!</h1> 
     <ul class="list-group"> 
      @{{ list.name }} 
       <li class="list-group-item" v-model="newTodoText" v-for="task in list.data"> 
        @{{ task}} 
       </li> 
     </ul> 
    </div> 
</template> 

、私はログ（市）との両方を見ることができますログ（タスク）。だから私はAPIの結果を得ている。しかし、私はそれをテンプレートにプッシュする方法を理解することはできません。私が受け取っているエラーはTypeError: undefined is not an object (evaluating 'this.todos.push')

Answer 1

$.getJSONの中で成功コールバックthisはVueインスタンスではなくなりました。あなたは$.getJSONを呼び出す前に、あなたのビューへの参照を保存する必要があります。

var vm = this; 
$.getJSON(..., function(tasks) { 
    ... 
    vm.todos.push(...) 

あるいは、vue-resourceに見えます。 Promise APIをサポートし、コールバック内のVueインスタンスを自動的にバインドしますので、引き続きthisを参照できます。 jQueryよりもはるかに軽いです。

Answer 2

dataにあなたは `todos`が定義されている。この

data: function() { 
    return { 
     list: [], 
     todos: [], 
     newTodoText: '' 
    } 
},