通过从数据中获取的组件循环 v-for

Question

我想使用 v-for 从我在数据中的列表中呈现组件列表。

这是我的代码

<template>
    <ticket-panel/>
    <user-panel/>
    <map-panel/>
    <info-panel/>
    <product-panel/>
</template>

我想做这样的事情

<template v-for="component in components" :key="name">
??? <component> ???
</template>


data: function() {
return {
components: [
    { name: "ticket-panel" },
    { name: "user-panel" },
    { name: "map-panel" },
    { name: "info-panel" },
    { name: "product-panel" }
]
}
}

如何编写 <template> 或 <componentName> 以便正确呈现？我经常使用 Google 但我没有找到任何接近的答案。

Answer 1

您可以试试这个过程，希望它对您有用。这是一个例子：

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

Answer 2

您可以像下面的片段一样尝试，具有特殊属性 :is

const app = Vue.createApp({
  data() {
    return {
      components: [{name: "ticket-panel"}, {name: "user-panel"}, {name: "map-panel"}, {name: "info-panel"}, {name: "product-panel"}]
    };
  },
})
app.component('ticket-panel', {
  template: `<div>ticket-panel</div>`
})
app.component('user-panel', {
  template: `<div>user-panel</div>`
})
app.component('map-panel', {
  template: `<div>map-panel</div>`
})
app.component('info-panel', {
  template: `<div>info-panel</div>`
})
app.component('product-panel', {
  template: `<div>product-panel</div>`
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="component in components" :key="component.name">
    <component :is="component.name"></component> 
  </div>
</div>

通过从数据中获取的组件循环 v-for

Loop v-for through components taken from data

javascript

vue.js

vuejs3