You add array of todos to the store simply by adding them to the state
defined in your store/index.js
file. You can access the array of todos using mapState
then loop through and display them with v-for
. This lesson walks you through the process of setting up todos in Vuex and displaying them in your Vue.js template.
[00:00] To add todos to our store we can just go ahead and delete the increment decrement and replace counter with todos. I'll add a task of eat and then duplicate this and change it to sleep and code. Just like we displayed the counter by mapping state, I can go ahead and display the todos in the same way. Todos.
[00:19] I'll get rid of these map mutations because I don't need them. Could also delete the buttons so that I can put in my todos, hit Save, and you'll see an array of todos rendered on the page. To style this a bit. I'm going to go to tachyons.io and go to the components and down to the lists.
[00:35] This list looks great so I'll just go here, scroll down, copy the HTML -- it's just HTML and some Tachyon classes -- and then I'll go ahead and paste that into my Index view. I'll clean up the formatting a little bit and just remove the padding I had before.
[00:50] Now, when I hit Save I'll have that same exact component -- I'll make this a bit smaller -- and that same component from tachyons.io. Now I can delete all the other list elements except for the one I need. I'll add a v4 attribute and say todo of todos, the todo being each todo in the array.
[01:09] Instead of this Mackerel tabby I can just go ahead and make that todo.task. When I hit Save now you'll see eat, sleep, and code and I'll remove this cats, replace it with todos, so now we have todos. To learn more about all these Tachyon classes you see here, just go to tachyons.io. There's a great list of them on the table of styles.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!