Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

115
Vistas
Dynamically fill in Vue components (in plain Vue3, no Nuxt, etc)

I am trying to implement a checksheet application with Vue, and it looks like this: The tasks to be performed are listed in a excel file.

=====

  1. Perform task A.

  2. Perform task B.

and it goes on...

=====

Then I am thinking about creating a CheckItem.vue component to be used for each one of the tasks that will look like this:

<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>

What I would like to accomplish:

Use the same "CheckItem.vue" component above to all tasks in the list, but with the "task-text" and "task-image" fields filled with their proper contents.

At the moment, I do not mind hard coding that fields contents manually (eventually, would like to do it in a smarter way). I just need to know how I can use the same component with different data inserted.

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Try like following snippet, you can make dynamic components by looping thru your data object with v-for and by passing props

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>

7 months 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 empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.