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.
=====
Realiza la tarea A.
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.
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>