Vuejs 和请求：计算属性函数不显示 GET JSON 值

Question

我有一个 Vue 实例。

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

我正在尝试使用 Request 的 get 方法填充 'albumList'。服务器成功 returns 200 状态码。在开发人员工具中，我看到 JSON 正在返回。

问题是列表（虽然很短）没有呈现在页面上。为了呈现列表，我使用了以下组件：

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

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

我正在尝试将计算出的专辑列表作为道具传递到我的 youtube-album-list-component 中。然后使用该列表创建专辑组件。我试图弄清楚为什么尽管 info 变量有一个正在返回的数组，但它没有被呈现。有什么想法吗？

Answer 1

computed 属性不能异步，你不能从它调用 API，因为它是异步的，你可以在方法中编写代码，它应该可以工作：

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

如果你坚持或有一个强大的用例只在计算属性中使用它，那么你可以使用像 vue-async-computed 这样的东西，这使得 Vue 中的计算属性成为可能异步计算。

但我相信使用方法应该完全没问题。

Answer 2

你可以像这样重新设计，基本上你将有一个属性将你的列表保存在组件的 data 属性中，你用 ajax 更新它，然后用你计算的 [=18] 转换和公开=].

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

一个完整的工作fiddle is here。添加功能尚未完成，您可以在此基础上构建或根据自己的喜好进行调整。

Vuejs 和请求：计算属性函数不显示 GET JSON 值

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

json

vue.js

vue-component

Vuejs 和请求：计算 属性 函数不显示 GET JSON 值

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

json

vue.js

vue-component

Vuejs 和请求：计算属性函数不显示 GET JSON 值