在 Vue JS 中使用 v-for 为组件发送 props
Posted
技术标签:
【中文标题】在 Vue JS 中使用 v-for 为组件发送 props【英文标题】：Sending props for components using v-for in Vue JS 【发布时间】：2022-01-05 03:58:51 【问题描述】：我实施了 cmets 中提出的更改。它现在正在工作！非常感谢大家的帮助
------------ 下面的初始帮助请求：--------
我有一个 Home.vue 父组件用作主页。在此页面上，我发出获取请求以获取一系列帖子。我尝试使用 v-for 遍历帖子数组并每次发送一个新的帖子对象。
我的问题如下：
数组已完整发送，因此仅生成一个 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"
]
【问题讨论】：
你的问题有点不清楚，就像你所说的数组被完整发送，因此只生成一个帖子模板......是什么意思？各种问题v-bind:sendArticleData = post，应该是v-bind:sendArticleData="post" 或只是:sendArticleData="post" 也Posts : "", 是错误的初始类型如果它最终是一个数组，它应该是Posts : [],
那么问题出在哪里？
this.articleData 在子级，仍然向我发送完整的数组。我还尝试了@Nikola Pavicevic 的解决方案。但它仍然没有遍历数组的所有对象。
在@Nikola Pavicevic 发送的 sn-p 中，它运行良好！
【参考方案1】：
如果我理解正确，请尝试如下 sn-p:
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>【讨论】：
感谢您的宝贵时间，但仍然无法正常工作。我不知道我做错了什么...... 但是sn-p的工作原理正是我所需要的。 是的，完全按照您的建议。我已经更新了帖子，以便您可以看到您提出的和我实施的更改。 是的，我做到了。 fetch("localhost:3000/api/post", requestOptions) .then(response => response.text()) .then((result) => this.posts = JSON.parse(result); console.log(this.posts) ; ) 不客气，如果你觉得我的回答有用，请接受（勾选）它，干杯:)【参考方案2】：注意事项：
首先，为迭代元素传递键的方式是错误的。数组的传递和索引会导致不可预测的结果或 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
【讨论】：
感谢您的宝贵时间，我将实施更改并随时通知您 您好@Raffobaffo，感谢您的帮助。但我还有一个小问题。现在它向我显示了一个新错误：“索引已定义，但从未使用过”。 这只是一个警告，很可能你忘记从 v-for 的属性中删除索引 是的，现在干净了。错误已消失。 但是我仍然有问题，我只生成一次文章组件并且他收到了完整的数组。我已经更新了帖子，这样您就可以看到代码，以及您所做的所有更改。以上是关于在 Vue JS 中使用 v-for 为组件发送 props的主要内容，如果未能解决你的问题，请参考以下文章