I have a Vue instance.
// create a root instance
var app = new Vue({
el: '#app',
data:
{
album: '',
artist: '',
link: '',
genre: '',
rating: '',
genres: ["Memphis Rap", "R&B\Soul", "Pop", "Vaporwave", "Alt-Lat"],
length: 0
},
methods: {
addAlbum: function (event) {
this.youtubeAlbumList.push({ album: this.album, artist: this.artist, link: this.link, genre: this.genre, rating: this.rating });
request.post(
'http://localhost:3000/album',
{ json: { album: this.album, artist: this.artist, link: this.link, genre: this.genre, rating: this.rating } },
function (error, response, body) {
if (!error && response.statusCode == 201) {
console.log(body)
}
}
);
this.length = this.youtubeAlbumList.length;
this.album = '';
this.link = '';
this.genre = 'Genre';
this.rating = '';
}
},
computed: {
albumList:
{
get: function () {
request.get(
'http://localhost:3000/album',
function (err, res, body) {
var info = JSON.parse(body);
//.forEach(function(obj) { console.log(obj.id); });
return info;
}
)
}
}
}
});
I'm trying to populate the 'albumList' using Request's get method. The server successfully returns 200 Status Code. In the Developer Tools, I see that the JSON is returning.
The issue is that the list (albeit short) is not rendering on the page. To render the list, I used the following components:
Vue.component('album-component', {
template: `
<div class="content">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="#" alt="#">
<div class="caption">
<h3>{{x.album}}</h3>
<div class="message-body">
<h2>Artist: {{x.artist}}</h2>
<h3>Link: <a v-bind:href="x.link">Link</a></h3>
<div>Genre: {{x.genre}}</div>
<div>Rating: {{x.rating}}</div>
</div>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>`,
props: ['album'],
data: function () {
return {
x:this.album
}
}
});
// register
Vue.component('youtube-album-list-component', {
template: `<div class="row">
<album-component v-for="album in albumList" :album="album"> </album-component>
</div>`
,
props: ['albums'],
data: function () {
return {
albumList: this.albums
}
}
})
And the index.html
<div id="app">
<div>
<div class="input-group input-group-med">
<span class="input-group-addon">Album</span>
<input v-model="album" class="form-control" placeholder="Title">
</div><br>
<div class="input-group input-group-med">
<span class="input-group-addon">Artist</span>
<input type="text" class="form-control" placeholder="Name" v-model="artist">
</div><br>
<div class="input-group input-group-med">
<span class="input-group-addon">Link</span>
<input type="text" class="form-control" placeholder="Link" v-model="link">
</div><br>
<div v-cloak class="input-group input-group-med">
<select v-model="genre">
<option v-for="genre in genres" v-bind:values="genre">{{genre}}</option>
</select>
</div>
<br>
<div class="input-group input-group-med">
<span class="input-group-addon">Rating</span>
<input type="text" class="form-control" placeholder="Rating" v-model="rating">
</div><br>
</div>
<button v-on:click="addAlbum" type="button" class="btn btn-danger btn-lg">Left</button>
<br>
<br>
<div>
<div class="page-header result-header">
<h1>Album list</h1>
</div>
</div>
<youtube-album-list-component :albums="albumList"></youtube-album-list-component>
</div>
I am trying to pass the computed albumList in to my youtube-album-list-component as prop. Then using that list to create album-components. I'm trying to figure out why although the info variable has an Array that is being returned, it's not being rendered. Any ideas?
You could redesign something like this, Basically you will have a property to hold your list in the data
property of the component, you update it with ajax, then transform and expose with your computed property.
Vue.component('album-component',{
template:"#album-template",
props: ['album']
});
Vue.component('youtube-album-list-component', {
template:"#youtube-list-template",
props: ['albums',"isLoading"]
});
var app = new Vue({
el: '#app',
data:
{
album: '',
artist: '',
link: '',
genre: '',
rating: '',
genres: ["Memphis Rap", "R&B\Soul", "Pop", "Vaporwave", "Alt-Lat"],
length: 0,
albumStore:[], //This will be your backing store
limit:2,
isBusy:true
},
created:function(){
var me=this;
//*********REPLACE WITH YOUR AJAX CALL HERE*********
//moke a ajax request
setTimeout(function(){
me.albumStore.push.apply(me.albumStore,[
{album:"Album 1",artist:"Artist 1",genre:"Pop",rating:4},
{album:"Album 2",artist:"Artist 1",genre:"Vaporwave",rating:3},
{album:"Album 3",artist:"Artist 1",genre:"Memphis Rap",rating:5},
]);
me.isBusy=false;
},3000);
},
methods: {
addAlbum: function (event) { }
},
computed: {
albumList:
{
get: function () {
//do some for loop or $.map processing here and return the result.
var list=[];
for(var i=0; i<this.limit && i < this.albumStore.length;i++)
{
list.push(this.albumStore[i]);
}
return list;
}
}
}
});
A full working fiddle is here. Add functionality is not done, you can build on top of this or adapt it to your liking.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments