Currently working on implementing dynamic buttons to fetch data from an API call. Struggling with pushing the data array to the template and div.
Here is my VueJS setup:
var example = new Vue({
el: '#example',
data: function () {
return {
list: []
}
},
methods: {
fetchMovies: function (city) {
$.getJSON('api/city?city=' + city, function(tasks) {
console.log(tasks); // Response from API
console.log(city); // Data sent by button
this.list = tasks; // Assign API results to list array
this.todos.push(this.newTodoText); // Push results to div
}.bind(this))
}
}
});
Below is the button and template structure:
<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>
Within chrome dev tools, I can view both log(city) and log(tasks). The API results are being retrieved successfully. However, struggling to push it to the template. An error occurs stating
TypeError: undefined is not an object (evaluating 'this.todos.push')