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

Posted 2023-02-23

【中文标题】Vue.js 不知道如何将 props 传递给 map() 函数和循环组件

【英文标题】：Vue.js don't know how to pass props to map() function and looping components

【发布时间】：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/c***tL1/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/c***tL1/hats.png',
            id: 1,
            linkUrl: 'hats'
          , // the other elements continue

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

【问题讨论】：

在 vue 中你使用 v-for

【参考方案1】：

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

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