Vue.js 不知道如何将 props 传递给 map() 函数和循环组件答案

【问题标题】：Vue.js don't know how to pass props to map() function and looping componentsVue.js 不知道如何将 props 传递给 map() 函数和循环组件
【发布时间】：2021-03-17 00:27:37
【问题描述】：

我是 Vue 的初学者，我正在尝试将这段 React 代码转换为我的 Vue 应用程序，我正在努力修复它。我正在使用 map() 函数循环一个对象并将道具传递给它。

反应：

<div className='directory-menu'>
  {this.state.sections.map(({ id, ...otherSectionProps }) => (
    <MenuItem key={id} {...otherSectionProps} />
  ))}
</div>

我有这个状态对象：

 this.state = {
      sections: [
        {
          title: 'hats',
          imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
          id: 1,
          linkUrl: 'hats'
        }, // the other elements continue

在 Vue 我想做同样的事情：

<template>
  <div class="directory-menu">
    {{ 
     sections.map(() => (
      <MenuItem :key="sections.id" v-bind="sections" />
     ))
    }}
  </div>
</template>

道具的来源数据：

<script>
  import MenuItem from '../Menu-Item/MenuItem.vue';
  export default {
    components:{
      MenuItem
    },
    data(){
      return{
        sections: [
          {
            title: 'hats',
            imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
            id: 1,
            linkUrl: 'hats'
          }, // the other elements continue

我不知道我是否未能使用扩展运算符 v-bind 或其他我缺少的东西传播道具。

【问题讨论】：

在 vue 中你使用 v-for

标签： vue.js vue-component

【解决方案1】：

你应该在 vuejs 中使用v-for 来渲染一个列表：

<div class="directory-menu">
    <MenuItem  v-for="section in sections" :key="section.id"/>
</div>

【讨论】：