以下是来自初学者的非常简单的Nativescript Vue示例。如下图所示,它显示了5个帖子标题的列表。
所以只要我只使用computed
将数据返回到模板,上面的测试就可以开始了。但是,如果我尝试使用create()
或mounted()
事件/生命周期钩子来设置posts
属性,我在显示中什么也得不到。 console.log
行永远不会显示消息,因此它们永远不会被触发。为什么不?
此外,如果我尝试使用fetch(调用我的fetchPosts()
方法)从测试restapi中提取帖子,我得不到任何数据,console.error
什么也没显示。为什么不?
<template>
<Page class="page">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="Home"></Label>
</ActionBar>
<ScrollView>
<StackLayout class="home-panel">
<!--Add your page content here-->
<Label v-for="post in posts" :text="post.title" :key="post.id"/>
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
// posts: [],
// create() {
// console.log("create event fired");
// this.posts = this.getPosts();
// },
// mounted() {
// console.log("mounted event fired");
// this.posts = this.getPosts();
// },
computed: {
posts() {
//return this.fetchPosts();
return this.getPosts();
}
},
methods: {
fetchPosts() {
fetch("https://jsonplaceholder.typicode.com/posts")
.then(res => res.json())
.then(res => {
console.log("fetch response", res);
return res;
})
.catch(err => {
console.error(err);
return [{ id: 0, title: "Error: " + err }];
});
},
getPosts() {
return [
{
userId: 1,
id: 1,
title:
"sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
body:
"quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
userId: 1,
id: 2,
title: "qui est esse",
body:
"est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
userId: 1,
id: 3,
title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
body:
"et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
},
{
userId: 1,
id: 4,
title: "eum et est occaecati",
body:
"ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
},
{
userId: 1,
id: 5,
title: "nesciunt quas odio",
body:
"repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
}
];
}
}
};
</script>
<style scoped lang="scss">
// Start custom common variables
@import "../app-variables";
// End custom common variables
// Custom styles
.fa {
color: $accent-dark;
}
.info {
font-size: 20;
}
</style>
我在您的代码中发现了一些问题:
created
,而不是create
posts
列表应该在data
内:
data() {
return {
posts: []
};
},
fetchPosts()
没有返回任何东西,但你期望返回posts
。你必须在posts
回调中设置then
:
fetchPosts() {
fetch("https://jsonplaceholder.typicode.com/posts")
.then(res => res.json())
.then(res => this.posts = res)
.catch(err => console.error(err));
}
这是因为fetch
返回了Promise
。问:如何从Promise
返回数据? A:You can't!完整代码:
<script>
export default {
data() {
return {
posts: [{
title: '1 Title',
id: 1
}]
};
},
created() {
console.log("create event fired");
this.posts = this.fetchPosts();
},
mounted() {
console.log("mounted event fired");
this.fetchPosts();
},
methods: {
fetchPosts() {
return fetch("https://jsonplaceholder.typicode.com/posts")
.then(res => res.json())
.then(res => this.posts = res);
}
}
};
</script>
代码测试here。
对我来说它也没有触发,而不是使用挂载或创建我在页面元素上添加了一个加载的事件
<template>
<page @loaded="startMyApp">
......
</template>
<script>
export default {
data() {
return {
}
},
methods: {
startMyApp()
{
}
}
</script>