Vuejs and Request: Computed property function doesnt display GET JSON value

Question

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:&nbsp{{x.artist}}</h2>
                            <h3>Link:&nbsp<a v-bind:href="x.link">Link</a></h3>
                            <div>Genre:&nbsp{{x.genre}}</div>
                            <div>Rating:&nbsp{{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?

Answer 1

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.

Answer 2

computed property can not be async, you can not call a API from it, as that is asynchronous, you can write that code in methods and it should work:

 methods: {
        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;
                    }
                )
            }
        }

If you are adamant or have a strong use case of having this in computed property only, than you can use something like vue-async-computed which makes it possible to have computed properties in Vue that are computed asynchronously.

But I am sure using method should be perfectly fine.