preface

With the content of the previous 2 chapters, I believe that friends can also try to write, do you find it very simple after starting? Now let’s move on to the next chapter, customizing task groups.

Todo List GitHub code library

This “Todo List: Vue To-do List Task Management”, divided into chapters, interested students can continue to pay attention to.

Chapter 1: Preliminary Understanding (project construction, implementation of basic functional components) chapter 2: Dynamic data processing (localStorage + Vuex), which can be added and edited Chapter 3: To-do Item user-defined group Chapter 4: To-do Item Add description, image and other information Chapter 5: Online operation, database Mysql Chapter 6: Multi-person collaborative processing of to-do items, permission management Chapter 7: End: Online publishing

7 chapters are defined initially, and may be added or reduced in actual development.

HTML page adjustment

Add “Create group button” and add “Enter group Name” dialog box on todo-list.vue.

< div class = "todo - content" > < div class = "func - ment" > < div class = "li" @ click = "$refs. CreateGroupDialog. The show ()" > new group < / div > </div> <list :listData="todoData"></list> < C-dialog ref="createGroupDialog" title=" new task "cancelBtn=" cancel" confirmBtn=" confirm" @confirm="confirmCreateGroup" > <div class="item-detail"> <ul> <li class="dis-flex"> <div class=" W-80 "> Group name </div> <div class="flex1"> <input type="text" v-model="groupName"> </div> </li> </ul> </div> </c-dialog> </div>Copy the code

Object popbox confirmation event:

confirmCreateGroup () {
  this.$store.commit(types.M_CREATE_TODO_LIST_GROUP, {
    title: this.groupName,
    list: []})}Copy the code

Store to modify

Add M_CREATE_TODO_LIST_GROUP method to store/types.js

export const M_CREATE_TODO_LIST_GROUP = 'M_CREATE_TODO_LIST_GROUP'
Copy the code

Store/mutations. Js content:

[types.M_CREATE_TODO_LIST_GROUP] (state, data) {
  state.todoData.push(data)
  todoStorage.setTodoList = state.todoData
}
Copy the code

The arguments passed directly to state.todoDatapush, which are the group name and an empty array of group tasks. Then synchronize to Storage.

That’s easy to do. Task groups.

preview

Todo List GitHub code library