我为我做了一些新的东西,但我遇到了问题..所以让我们再解释一下..
我有一个名为 components/HomeComponent.vue
这里是:
HomeComponent.vue
<script>
export default {
name: "HomeComponent",
data() {
posts: [
{ title: "Hello", body: "Some text" },
{ title: "Hello", body: "Some text" },
{ title: "Hello", body: "Some text" },
{ title: "Hello", body: "Some text" }
];
}
};
</script>
我有我的“ View ”views/Home.vue
Home.vue
<template>
<!-- Blog Entries Column -->
<div class="col-md-8">
<h1 class="my-4">Статии</h1>
<!-- Blog Post -->
<div class="card mb-4" v-for="post in posts">
<div class="card-body">
<h2 class="card-title">{{ post.title }}</h2>
<p class="card-text">{{ post.body }}</p>
<a href="#" class="btn btn-primary">Read More →</a>
</div>
<div class="card-footer text-muted">
Posted on January 1, 2017 by
<a href="#">xxx</a>
</div>
</div>
</div>
</template>
所以我想访问我的 Home.vue
中的帖子并进行 for 循环..该怎么做?
谢谢指教! :)
<script>
// @ is an alias to /src
import HomeComponent from "@/components/HomeComponent.vue";
export default {
name: "home",
components: {
HomeComponent
},
};
</script>
最佳答案
您必须将数据作为 props 传递给 Home 组件。更多信息可查询here 。但这里有一个快速解决您的问题的方法。
Comp.vue
<template>
<!-- Blog Entries Column -->
<div class="col-md-8">
<h1 class="my-4">Статии</h1>
<!-- Blog Post -->
<div class="card mb-4" v-for="post in posts">
<div class="card-body">
<h2 class="card-title">{{ post.title }}</h2>
<p class="card-text">{{ post.body }}</p>
<a href="#" class="btn btn-primary">Read More →</a>
</div>
<div class="card-footer text-muted">
Posted on January 1, 2017 by
<a href="#">xxx</a>
</div>
</div>
</div>
</template>
<script>
export default {
props:['posts']
}
</script>
HomePage.vue
<template>
<comp :posts="posts"></comp>
</template>
<script>
import Comp from './components/Comp.vue'
export default {
name: "HomeComponent",
components: {
'comp': Comp
},
data() {
posts: [
{ title: "Hello", body: "Some text" },
{ title: "Hello", body: "Some text" },
{ title: "Hello", body: "Some text" },
{ title: "Hello", body: "Some text" }
];
}
};
</script>
关于javascript - VueJS,将数据从组件传递到另一个组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53998657/