Populate Vue components dynamically without the need for additional frameworks like Nuxt in Vue3

Question

Populate Vue components dynamically without the need for additional frameworks like Nuxt in Vue3

My goal is to develop a checksheet application using Vue, where the tasks are specified in an excel file.

=====

To start, task A needs to be completed.
Followed by task B.

and so on...

=====

I am considering creating a CheckItem.vue component for each task. It will have the following structure:

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

My objective is to utilize the same "CheckItem.vue" component for all tasks listed, but customizing the "task-text" and "task-image" with relevant data.

Currently, I am open to manually hard code these fields (with plans to optimize this process later). I simply need guidance on how to dynamically insert different data into the same component.

javascript vue.js vuejs3

Answer 1

Answer №1

Check out the code snippet below to learn how to create dynamic components in VueJS using a loop through your data object with the v-for directive and 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>

Answer 2

Check out the code snippet below to learn how to create dynamic components in VueJS using a loop through your data object with the v-for directive and 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>

Populate Vue components dynamically without the need for additional frameworks like Nuxt in Vue3

Answer №1

Similar questions

Show real-time server responses using jQuery while waiting for the AJAX request to complete

Several conditional statements in JSX

Triggering event within the componentDidUpdate lifecycle method

Ways to disable mousewheel function in jQuery

Error: The MUI Popper Component constantly closes when re-rendering due to props issue

Transparent background with opaque text

Steps for ensuring a div component appears on top of any other component (like h1 or p)

What is the best way to extract user input and pass it to an AJAX request URL?

The attribute 'sandwiches' cannot be found within the data type 'string'

How can Symfony, Jquery, and Ajax work together to append elements to themselves?

Focus on input using jQuery (fixed focus)

Divide data into an HTML table and merge it with header information

The sticky navigation bar isn't functioning properly, even though the code worked perfectly on W3School

Utilizing an external API in Javascript for fetching data

What could be the reason behind my Heroku app suddenly crashing without any visible errors?

Error encountered during Nuxt build: Syntax error on Line 1 of the SCSS component file

The script fails to execute on content loaded through AJAX in Django

JavaScript has the ability to manipulate the width of an element by using methods to both retrieve

`problem with moment.js incorrectly identifying the day of a given date`

Using JavaScript to make an asynchronous call to the server via AJAX