Iterate through many div classes and initilize vue.js

Question

I am starting to learn Vue.js by creating a simple project - I am creating this simple app where I want to list many todo list items.

My html structure would be something like this:

<div id="todo-list-1" class="todo-list"></div>
<div id="todo-list-2" class="todo-list"></div>
<div id="todo-list-3" class="todo-list"></div>

and my main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el: '#todo-list-1',
  render: h => h(App)
})

App.vue

<template>
  <div>
    <h2>Vue Test</h2>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

how can I iterate through my elements dynamically so I dont have to create them manually?

new Vue({
  el: '#todo-list-1',
  render: h => h(App)
})
new Vue({
  el: '#todo-list-2',
  render: h => h(App)
})
new Vue({
  el: '#todo-list-3',
  render: h => h(App)
})

I want to create one template but render different lists for my todo list. I cant have one id class "app", I want to have multiple instance of these so I can use them in different places with different data.

Kareem Dabbeet · Accepted Answer · 2021-10-15 18:31:47Z

2

You can use querySelectorAll to loop over you lists and define new Vue instance

document.querySelectorAll('.todo-list').forEach(list => {
   new Vue({
     el: `#${list.id}`,
     render: h => h(App)
   })
})

edited Oct 15, 2021 at 18:31

answered Oct 15, 2021 at 18:24

Kareem Dabbeet

3,9943 gold badges19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Iterate through many div classes and initilize vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related