Vuejs和请求：计算属性函数不显示GET JSON值
我有一个Vue实例Vuejs和请求：计算属性函数不显示GET JSON值,json,vue.js,vue-component,Json,Vue.js,Vue Component,我有一个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"
// 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;
}
)
}
}
}
});
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
}
}
})
Vue.component（'album-component'{
模板：`
{{x.album}
艺术家：{x.Artist}
链接：
流派：{x.Genre}
评级：{x.Rating}
`,
道具：[‘相册’]，
数据：函数（）{
返回{
x:这是我的相册
}
}
});
//登记册
Vue.component（'youtube-album-list-component'{
模板：`
`
,
道具：[“相册”]，
数据：函数（）{
返回{
albumList:this.albums
}
}
})
<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相册列表组件中。然后使用该列表创建相册组件。我试图弄明白为什么尽管info变量有一个返回的数组，但它没有被呈现。有什么想法吗？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;
}
)
}
}
但我确信使用方法应该非常好。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;
}
)
}
}
但我确信使用这种方法应该是非常好的。您可以重新设计类似的东西， 基本上，您将有一个属性来保存组件的
数据属性中的列表，您可以使用ajax更新它，然后使用计算属性进行转换和公开
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;
}
}
}
});
Vue.component（'album-component'{
模板：“#相册模板”，
道具：[“相册”]
});
Vue.component（'youtube-album-list-component'{
模板：“#youtube列表模板”，
道具：['albums'，“isLoading”]
});
var app=新的Vue({
el:“#应用程序”，
数据：
{
相册：“”，
艺术家：''，
链接：“”，
类型：''，
评级：''，
类型：[“孟菲斯说唱”、“R&B\灵魂”、“流行音乐”、“蒸汽舞曲”、“Alt-Lat”]，
长度：0，
albumStore:[]，//这将是您的备份存储
限额：2，
我很忙：是的
},
已创建：函数（）{
var me=这个；
//*********在这里替换为AJAX调用*********
//moke一个ajax请求
setTimeout（函数（）{
me.albumStore.push.apply（me.albumStore[
{专辑：“专辑1”，艺术家：“艺术家1”，流派：“流行”，评级：4}，
{专辑：“专辑2”，艺术家：“艺术家1”，流派：“蒸汽”，评级：3}，
{专辑：“专辑3”，艺术家：“艺术家1”，流派：“孟菲斯说唱”，评级：5}，
]);
me.isBusy=false；
},3000);
},
方法：{
addAlbum:函数（事件）{}
},
计算：{
专辑列表：
{
get:function（）{
//在此处执行一些for loop或$.map处理并返回结果。
var列表=[]；
对于（var i=0；i你可以重新设计这样的东西，
基本上，您将有一个属性来保存组件的数据属性中的列表，您可以使用ajax更新它，然后使用计算属性进行转换和公开
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;
}
}
}
});
Vue.component（'album-component'{
模板：“#相册模板”，
道具：[“相册”]
});
Vue.component（'youtube-album-list-component'{
模板：“#youtube列表模板”，
道具：['albums'，“isLoading”]
});
var app=新的Vue({
el:“#应用程序”，
数据：
{
相册：“”，
艺术家：''，
链接：“”，
类型：''，
评级：''，
类型：[“孟菲斯说唱”、“R&B\灵魂”、“流行音乐”、“蒸汽舞曲”、“Alt-Lat”]，
长度：0，
albumStore:[]，//这将是您的备份存储
限额：2，
我很忙：是的
},
已创建：函数（）{
var me=这个；
//*********在这里替换为AJAX调用*********
//moke一个ajax请求
setTimeout（函数（）{
me.albumStore.push.apply（me.albumStore[
{专辑：“专辑1”，艺术家：“艺术家1”，流派：“流行”，评级：4}，
{专辑：“专辑2”，艺术家：“艺术家1”，流派：“蒸汽”，评级：3}，
{专辑：“专辑3”，艺术家：“艺术家1”，流派：“孟菲斯说唱”，评级：5}，
]);
me.isBusy=false；
},3000);
},
方法：{
addAlbum:函数（事件）{}
},
计算：{
专辑列表：
{
get:function（）{
//在此处执行一些for loop或$.map处理并返回结果。
var列表=[]；
对于（var i=0；iProperty，co