API-Ergebnisse in div mit vuejs anzeigen

Question

Der Versuch, dynamische Schaltflächen einzurichten, um einige Daten von einem API-Aufruf abzurufen. Aber ich kann nicht scheinen, das Datenarray auf die Vorlage und das div zu schieben.

Aussehen Meine VueJS wie folgen aus:

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)) 
    } 
    } 
}); 

Und die Taste, und Vorlage sieht wie folgt aus:

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

In Chrom Entwickler-Tool, kann ich sowohl die lügen (Stadt) sehen und die Protokollieren (Aufgaben). Also bekomme ich Ergebnisse von der API. Aber ich kann nicht herausfinden, wie man es auf die Vorlage drückt. Der Fehler, den ich empfangen habe, ist TypeError: undefined is not an object (evaluating 'this.todos.push')

Answer 1

In Ihrem $.getJSON Erfolg Rückruf this nicht mehr Ihre Vue-Instanz. Sie müssen einen Verweis auf Ihre Ansicht speichern, bevor $.getJSON Aufruf:

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

Oder schauen Sie in vue-resource. Es unterstützt die Promise API und bindet die Vue-Instanz automatisch innerhalb von Rückrufen ein, sodass Sie weiterhin auf this verweisen können. Und es ist viel leichter als jQuery.

Answer 2

in data Sie benötigen diese einen Standardwert für todos und newTodoText wie

definieren

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