创建一个循环来循环创建的组件

Question

我有这个数据返回给我标签和我需要创建一个组件。

当我传递值时，该组件已经构建。现在我想将它创建为 for 循环，以便我可以继续添加条目，它会根据需要创建组件。

这是我试过的：

data() {
  return {
    options: [{

        heading: 'Welcome to the Card',
        subheading: 'Manage your Profile here'
      },
      {

        heading: 'Pay your bills',
        subheading: 'Manage your bills and payments here'
      }
    ]
  }
}

我正在尝试像这样循环它

<div v-for="(value, key) in options">
  <componentName {{key}} = {{value}}/>  
</div>

以前，上面的代码是这样的：

<componentName :heading='Welcome to the Card' :subheading='Manage your Profile here'/>

效果很好，但要添加更多内容，我必须重新创建我想避免的 <componentName。我想保留一个条目并为其提供对象数组

我正在使用 Vue2。我在这里做错了什么？

Answer 1

你非常接近。根据您的数据，模板需要如下所示：

<div v-for="(option, index) in options" :key="index">
  <h3>{{ option.heading }}</h3>
  <p>{{ option.subheading}}</p>
</div>

或者，如果您有一个自定义组件，它将 heading 和 subheading 作为属性：

<componentName
  v-for="(option, index) in options"
  :key="index"
  :heading="option.heading"
  :subheading="option.subheading"
/>

如果您可以分享更多的代码，我可以创建一个可运行的代码段，如果这会有所帮助的话。

创建一个循环来循环创建的组件

creating a loop to loop over the componennt created

vue.js

vue-component

vuejs2