在 Vue JS 中使用 v-for 为组件发送 props
Sending props for components using v-for in Vue JS
我实施了评论中提出的更改。它现在正在工作！非常感谢大家的帮助
------------ 下面的初始帮助请求：--------------------
我有一个 Home.vue 父组件用作主页。在此页面上，我发出获取请求以获取 post 数组。我尝试使用 v-for 遍历 posts 数组并每次发送一个新的 post 对象。
我的问题如下：
- 数组已完整发送，因此只生成一个Post模板...
提前感谢您抽出时间，我做了一些研究，但没有成功。
在Home.vue父组件下面找到
<template>
<div class="home">
<div v-for="(post, index) in posts" :key="index">
<ImageArticle
:articledata="post"
class="home__component"/>
</div>
</div>
</template>
<script>
import ImageArticle from "../components/imageArticle"
import { mapState } from "vuex"
export default {
name: 'Home',
components: {
ImageArticle,
},
data() {
return {
posts : [],
}
},
computed: {
...mapState({
UserName: "UserName",
UserLogin: "UserLogin",
UserEmail: "UserEmail",
UserPublications: "UserPublications",
UserFriends: "UserFriends"
})
},
created() {
this.getAllPosts()
},
methods:{
getAllPosts () {
var requestOptions = {
method: 'GET',
redirect: 'follow'
};
fetch("http://localhost:3000/api/post/", requestOptions)
.then(response => response.text())
.then((result) => {
this.posts = JSON.parse(result);
console.log(this.posts);
})
.catch(error => console.log('error', error));
}
}
}
</script>
在子组件下方找到 ，我尝试将 post 对象作为道具发送到该子组件。 （我删除了很多代码，以使其更具可读性）
<template>
<div>
<article class="postWithImage">
<h4 class="postWithImage__h4">Kaerbran {{articleData.Post_Comment}}</h4>
</article>
</div>
</template>
<script>
import ModalBoxActionArticle from '../components/modalBoxActionArticle'
export default {
name: 'ImageArticle',
props : ['articledata'],
data() {
return {
articleData : this.articledata,
}
}
}
</script>
在我发送的数组下方找到。我想为每个 Post_ID.
创建一个新模板
"posts": [
{
"Post_ID": "48be1774-4563-478b-9201-56ab2887d9a1",
"Post_Picture": "placeholder.png",
"Post_Location": "ParisII",
"Post_Date_published": "2021-10-22T17:43:10.281Z",
"Post_Date_modified": "2021-10-22T17:43:10.281Z",
"Post_Comment": "un commentaire",
"Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"
},
{
"Post_ID": "88ce1c98-ad16-4987-82c9-f8a9abff7f33",
"Post_Picture": "placeholder.png",
"Post_Location": "ParisII",
"Post_Date_published": "2021-10-22T17:44:12.985Z",
"Post_Date_modified": "2021-10-22T17:44:12.985Z",
"Post_Comment": "un commentaire",
"Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"
},
{
"Post_ID": "b43abd59-ce16-4c0e-a3e6-03402a35ecfc",
"Post_Picture": "placeholder.png",
"Post_Location": "ParisIII",
"Post_Date_published": "2021-10-22T17:45:23.013Z",
"Post_Date_modified": "2021-10-22T17:45:23.013Z",
"Post_Comment": "un commentaire",
"Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"
},
{
"Post_ID": "f2737804-9493-42d9-b425-51334c3a360a",
"Post_Picture": "placeholder.png",
"Post_Location": "Paris",
"Post_Date_published": "2021-10-22T17:15:56.994Z",
"Post_Date_modified": "2021-10-22T17:15:56.994Z",
"Post_Comment": "un commentaire",
"Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"
},
{
"Post_ID": "fcd4d5a0-c771-4243-99d9-b374b00c2159",
"Post_Picture": "placeholder.png",
"Post_Location": "ParisIII",
"Post_Date_published": "2021-10-22T17:45:01.362Z",
"Post_Date_modified": "2021-10-22T17:45:01.362Z",
"Post_Comment": "un commentaire",
"Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"
}
]
}
注意事项：
首先，您为迭代元素传递键的方式是错误的。数组的传递和索引导致不可预知的结果或 ui 没有得到更新。
从
更改此行
v-bind:key="{index}"
至
v-bind:key="post.Post_ID"
然后，你将数据传递给道具的方式也是错误的，从
v-bind:sendArticleData = post
至
v-bind:send-article-data="post"
甚至更简单：
:send-article-data="post"
详细了解 Vue 中的 props 外壳 here
如果我理解正确的话，请尝试像下面的片段：
Vue.component('Child', {
template: `
<div class="">
<div class="postWithImage">
<h4 class="postWithImage__h4">Kaerbran {{articleData.Post_Comment}}</h4>
</div>
</div>
`,
props : ['articledata'],
data() {
return {
articleData : this.articledata,
}
}
})
new Vue({
el: '#demo',
data() {
return {
posts: [
{"Post_ID": "48be1774-4563-478b-9201-56ab2887d9a1", "Post_Picture": "placeholder.png", "Post_Location": "ParisII", "Post_Date_published": "2021-10-22T17:43:10.281Z", "Post_Date_modified": "2021-10-22T17:43:10.281Z", "Post_Comment": "un commentaire1", "Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"},
{"Post_ID": "88ce1c98-ad16-4987-82c9-f8a9abff7f33", "Post_Picture": "placeholder.png", "Post_Location": "ParisII", "Post_Date_published": "2021-10-22T17:44:12.985Z", "Post_Date_modified": "2021-10-22T17:44:12.985Z", "Post_Comment": "un commentaire2", "Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"},
{"Post_ID": "b43abd59-ce16-4c0e-a3e6-03402a35ecfc", "Post_Picture": "placeholder.png", "Post_Location": "ParisIII", "Post_Date_published": "2021-10-22T17:45:23.013Z", "Post_Date_modified": "2021-10-22T17:45:23.013Z", "Post_Comment": "un commentaire3", "Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"},
{"Post_ID": "f2737804-9493-42d9-b425-51334c3a360a", "Post_Picture": "placeholder.png", "Post_Location": "Paris", "Post_Date_published": "2021-10-22T17:15:56.994Z", "Post_Date_modified": "2021-10-22T17:15:56.994Z", "Post_Comment": "un commentaire4", "Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"},
{"Post_ID": "fcd4d5a0-c771-4243-99d9-b374b00c2159", "Post_Picture": "placeholder.png", "Post_Location": "ParisIII", "Post_Date_published": "2021-10-22T17:45:01.362Z", "Post_Date_modified": "2021-10-22T17:45:01.362Z", "Post_Comment": "un commentaire5", "Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"}
]
}
},
})
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="home">
<div v-for="(post, index) in posts" :key="index">
<Child
:articledata="post"
class="home__component"/>
</div>
</div>
</div>
我实施了评论中提出的更改。它现在正在工作！非常感谢大家的帮助
------------ 下面的初始帮助请求：--------------------
我有一个 Home.vue 父组件用作主页。在此页面上，我发出获取请求以获取 post 数组。我尝试使用 v-for 遍历 posts 数组并每次发送一个新的 post 对象。
我的问题如下：
- 数组已完整发送，因此只生成一个Post模板...
提前感谢您抽出时间，我做了一些研究，但没有成功。
在Home.vue父组件下面找到
<template>
<div class="home">
<div v-for="(post, index) in posts" :key="index">
<ImageArticle
:articledata="post"
class="home__component"/>
</div>
</div>
</template>
<script>
import ImageArticle from "../components/imageArticle"
import { mapState } from "vuex"
export default {
name: 'Home',
components: {
ImageArticle,
},
data() {
return {
posts : [],
}
},
computed: {
...mapState({
UserName: "UserName",
UserLogin: "UserLogin",
UserEmail: "UserEmail",
UserPublications: "UserPublications",
UserFriends: "UserFriends"
})
},
created() {
this.getAllPosts()
},
methods:{
getAllPosts () {
var requestOptions = {
method: 'GET',
redirect: 'follow'
};
fetch("http://localhost:3000/api/post/", requestOptions)
.then(response => response.text())
.then((result) => {
this.posts = JSON.parse(result);
console.log(this.posts);
})
.catch(error => console.log('error', error));
}
}
}
</script>
在子组件下方找到 ，我尝试将 post 对象作为道具发送到该子组件。 （我删除了很多代码，以使其更具可读性）
<template>
<div>
<article class="postWithImage">
<h4 class="postWithImage__h4">Kaerbran {{articleData.Post_Comment}}</h4>
</article>
</div>
</template>
<script>
import ModalBoxActionArticle from '../components/modalBoxActionArticle'
export default {
name: 'ImageArticle',
props : ['articledata'],
data() {
return {
articleData : this.articledata,
}
}
}
</script>
在我发送的数组下方找到。我想为每个 Post_ID.
创建一个新模板"posts": [
{
"Post_ID": "48be1774-4563-478b-9201-56ab2887d9a1",
"Post_Picture": "placeholder.png",
"Post_Location": "ParisII",
"Post_Date_published": "2021-10-22T17:43:10.281Z",
"Post_Date_modified": "2021-10-22T17:43:10.281Z",
"Post_Comment": "un commentaire",
"Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"
},
{
"Post_ID": "88ce1c98-ad16-4987-82c9-f8a9abff7f33",
"Post_Picture": "placeholder.png",
"Post_Location": "ParisII",
"Post_Date_published": "2021-10-22T17:44:12.985Z",
"Post_Date_modified": "2021-10-22T17:44:12.985Z",
"Post_Comment": "un commentaire",
"Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"
},
{
"Post_ID": "b43abd59-ce16-4c0e-a3e6-03402a35ecfc",
"Post_Picture": "placeholder.png",
"Post_Location": "ParisIII",
"Post_Date_published": "2021-10-22T17:45:23.013Z",
"Post_Date_modified": "2021-10-22T17:45:23.013Z",
"Post_Comment": "un commentaire",
"Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"
},
{
"Post_ID": "f2737804-9493-42d9-b425-51334c3a360a",
"Post_Picture": "placeholder.png",
"Post_Location": "Paris",
"Post_Date_published": "2021-10-22T17:15:56.994Z",
"Post_Date_modified": "2021-10-22T17:15:56.994Z",
"Post_Comment": "un commentaire",
"Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"
},
{
"Post_ID": "fcd4d5a0-c771-4243-99d9-b374b00c2159",
"Post_Picture": "placeholder.png",
"Post_Location": "ParisIII",
"Post_Date_published": "2021-10-22T17:45:01.362Z",
"Post_Date_modified": "2021-10-22T17:45:01.362Z",
"Post_Comment": "un commentaire",
"Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"
}
]
}
注意事项：
首先，您为迭代元素传递键的方式是错误的。数组的传递和索引导致不可预知的结果或 ui 没有得到更新。 从
更改此行v-bind:key="{index}"
至
v-bind:key="post.Post_ID"
然后，你将数据传递给道具的方式也是错误的，从
v-bind:sendArticleData = post
至
v-bind:send-article-data="post"
甚至更简单：
:send-article-data="post"
详细了解 Vue 中的 props 外壳 here
如果我理解正确的话，请尝试像下面的片段：
Vue.component('Child', {
template: `
<div class="">
<div class="postWithImage">
<h4 class="postWithImage__h4">Kaerbran {{articleData.Post_Comment}}</h4>
</div>
</div>
`,
props : ['articledata'],
data() {
return {
articleData : this.articledata,
}
}
})
new Vue({
el: '#demo',
data() {
return {
posts: [
{"Post_ID": "48be1774-4563-478b-9201-56ab2887d9a1", "Post_Picture": "placeholder.png", "Post_Location": "ParisII", "Post_Date_published": "2021-10-22T17:43:10.281Z", "Post_Date_modified": "2021-10-22T17:43:10.281Z", "Post_Comment": "un commentaire1", "Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"},
{"Post_ID": "88ce1c98-ad16-4987-82c9-f8a9abff7f33", "Post_Picture": "placeholder.png", "Post_Location": "ParisII", "Post_Date_published": "2021-10-22T17:44:12.985Z", "Post_Date_modified": "2021-10-22T17:44:12.985Z", "Post_Comment": "un commentaire2", "Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"},
{"Post_ID": "b43abd59-ce16-4c0e-a3e6-03402a35ecfc", "Post_Picture": "placeholder.png", "Post_Location": "ParisIII", "Post_Date_published": "2021-10-22T17:45:23.013Z", "Post_Date_modified": "2021-10-22T17:45:23.013Z", "Post_Comment": "un commentaire3", "Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"},
{"Post_ID": "f2737804-9493-42d9-b425-51334c3a360a", "Post_Picture": "placeholder.png", "Post_Location": "Paris", "Post_Date_published": "2021-10-22T17:15:56.994Z", "Post_Date_modified": "2021-10-22T17:15:56.994Z", "Post_Comment": "un commentaire4", "Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"},
{"Post_ID": "fcd4d5a0-c771-4243-99d9-b374b00c2159", "Post_Picture": "placeholder.png", "Post_Location": "ParisIII", "Post_Date_published": "2021-10-22T17:45:01.362Z", "Post_Date_modified": "2021-10-22T17:45:01.362Z", "Post_Comment": "un commentaire5", "Post_Creator": "d4d2c7d4-e710-4842-9622-915ed21bdd71"}
]
}
},
})
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="home">
<div v-for="(post, index) in posts" :key="index">
<Child
:articledata="post"
class="home__component"/>
</div>
</div>
</div>