• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

257
Vistas
Rellene dinámicamente los componentes de Vue (en Vue3 simple, sin Nuxt, etc.)

Estoy tratando de implementar una aplicación de hoja de verificación con Vue, y se ve así: Las tareas a realizar se enumeran en un archivo de Excel.

=====

  1. Realiza la tarea A.

  2. Realiza la tarea B.

y sigue...

=====

Entonces estoy pensando en crear un componente CheckItem.vue para usar en cada una de las tareas que se verá así:

 <template> <div :class="[isChecked ? 'task-styling' : 'task-styling-checked']"> <div class="task-text">Perform task A.</div> <img class="task-image" alt="Task 1" src="../assets/img001.png" /> <div class="check-button"> <button @click="changeColor" type="submit" class="check-buttom" > Check </button> </div> </div> </template>

Lo que me gustaría lograr:

Use el mismo componente "CheckItem.vue" anterior para todas las tareas de la lista, pero con los campos "texto de tarea" e "imagen de tarea" llenos con sus contenidos adecuados.

Por el momento, no me importa la codificación dura que coloca los contenidos manualmente (eventualmente, me gustaría hacerlo de una manera más inteligente). Solo necesito saber cómo puedo usar el mismo componente con diferentes datos insertados.

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Intente seguir el siguiente fragmento, puede crear componentes dinámicos recorriendo su objeto de datos con v-for y pasando accesorios

 const App = { data() { return { tasks: [{id: 1, text: 'aaa', img: 'https://picsum.photos/30/29'}, {id: 2, text: 'bbb', img: 'https://picsum.photos/30/30'}, {id: 3, text: 'ccc', img: 'https://picsum.photos/30/31'}] } } } const app = Vue.createApp(App) app.component('CheckItem', { template: ` <div :class="isChecked ? 'task-styling-checked' : 'task-styling'" class="task"> <div class="task-text">{{ task.text }}</div> <img class="task-image" alt="Task 1" :src="task.img" /> <div class="check-button"> <button @click="changeColor" type="submit" class="check-buttom" > Check </button> </div> </div> `, props: ['task'], //👈 data() { return { isChecked: false } }, methods: { changeColor() { this.isChecked = !this.isChecked } } }) app.mount("#demo");
 .task-styling { background: skyblue; } .task-styling-checked { background: peru; } .task { padding: 1em; }
 <script src="https://unpkg.com/vue@next"></script> <div id="demo"> <div v-for="item in tasks" :key="item.id"> <!-- 👈 --> <check-item :task="item"></check-item> </div> </div>

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda