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

user_8289234 0
Viewed 69

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.

vuejs3 vue.js javascript
1 Answers

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>

user_119891890
Related