Me gustaría usar v-for para representar la lista de componentes de la lista que tengo en los datos.
este es mi codigo
<template> <ticket-panel/> <user-panel/> <map-panel/> <info-panel/> <product-panel/> </template>quiero hacer algo como esto
<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" } ] } } ¿Cómo escribir <template> o <componentName> para que se represente correctamente? Usé mucho Google pero no encontré ninguna respuesta cercana.
puedes intentarlo como el siguiente fragmento, con un atributo especial :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>Puede probar este proceso, con suerte, funcionará para usted. Aquí hay un ejemplo para ti:
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>