0
\$\begingroup\$

I am learning Vue.JS and I'm creating a simple todo app, where each list has a unique id. I am iterating through all of the list to create a Vue instance:

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

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

I want to create a "completed" state, which would be true when all items in a list are completed. So #todo-list-1 has a completed state, same with #todo-list-2 and #todo-list-3.

What would be a good approach to this problem? how can I handle the state for individual vue instances?

\$\endgroup\$
4
  • \$\begingroup\$ You're essentially just asking us to review a for-loop. CodeReview is about reviewing code, not Grisham novel recommendations. vuejsexamples.com/a-todo-list-app-using-vuejs \$\endgroup\$ Commented Oct 29, 2021 at 22:54
  • \$\begingroup\$ thanks, I am asking for recommendation on how to approach this problem, I cant get my head around how to set a simple state for each instance. \$\endgroup\$ Commented Oct 29, 2021 at 23:00
  • \$\begingroup\$ The answer to your question is in here: next.vuex.vuejs.org This kind of question does not belong on this StackExchange. \$\endgroup\$ Commented Oct 29, 2021 at 23:06
  • \$\begingroup\$ I checked the docs there already, looks like multiple store is not well supported github.com/vuejs/vuex/issues/414 \$\endgroup\$ Commented Oct 29, 2021 at 23:08

1 Answer 1

Reset to default
3
\$\begingroup\$

I consider Vuex advanced state management, and for the sake of your simple application I, personally, would value a simpler data-centric approach.

To this end, I propose you focus on creating a single instance that can have multiple todo-lists inside it represented as components.

<div id="app">
    <TodoList v-for="list in lists" :key="list.id" />
</div>

data() {
    return {
        lists: [
            {
                id: 1,
                todos: []
            },
            // ...
        ]
    }
}

Obviously, you'd need to represent your todos as a list of todo lists (with todos inside). You'll also need to ensure correct state management but JavaScripts pass-by-reference for objects will save you time here.

In order to detect if all todos are completed you could add a getter into the root instance to detect them all, or in the component to detect them per-instance.

I hope this helps set you on the right path, the best thing to do in most cases is start with your data-model as Vue is a data-centric framework.

\$\endgroup\$
2
  • \$\begingroup\$ thanks, the thing is that react has this useState hook which I used before, I need to have different instances because I am passing different api endpoints for each todo list. \$\endgroup\$ Commented Oct 29, 2021 at 22:14
  • \$\begingroup\$ If they fundamentally behave in the same way, they are the same component. If you are passing different bits of data, you can still do that. :list="list" will pass the entire list object to the component. You could just as easily pass config for the APIs. \$\endgroup\$ Commented Oct 29, 2021 at 22:26

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.