一起學Vue:CRUD(增刪改查)

目標

使用Vue構建一個非常簡單CRUD應用程序,以便您更好地了解它的工作方式。

效果頁面

比如我們要實現這樣列表、新增、編輯三個頁面:

列表頁面

新增頁面

編輯頁面

我們把這些用戶信息保存到Todos的數組中,然後增刪改查就在這個數組上進行:

Todos: [{
        Name: "遛狗"
    },
    {
        Name: "跑步"
    }
]

我們在這裡一共要實現TodoList.vue、TodoAdd.vue、TodoEdit.vue三個組件,分別對應列表頁面、新增頁面、編輯頁面的處理

列表功能

首先,在TodoList.vue中提供一個setTodos方法,將需要展示的數據給了數組Todos:

setTodos(arr) {
    this.Todos = JSON.parse(JSON.stringify(arr));
}

然後,在html中使用v-for把Todos數組渲染出來:

<tr v-for="(item, index) in Todos" :key="index">
    <td>{{index+1}}</td>
    <td>{{item.Name}}</td>
    <td>
        <button @click="editTodo(index)">編輯</button>
        <button @click="deleteTodo(index)">刪除</button>
    </td>
</tr>

新增功能

首先,在TodoList.vue中提供一個新增按鈕及新增頁面組件:

<button type="text" @click="addTodo()">新增</button>
<TodoAdd :dialogVisible="addDialogVisible" :selectedItem="selectedItem" @save="createTodo"  @cancel="cancel"></TodoAdd>

接下來,TodoList.vue中提供addTodo方法,控制TodoAdd頁面是否顯示:

addTodo() {
    this.addDialogVisible = true;
},

接下來,在TodoAdd.vue中提供一個save和cancel方法,分別調用TodoList.vue中的createTodo和cancel方法:

save() {
    this.$emit('save', this.selectedItem);
},
cancel() {
    this.$emit('cancel');
}

最後,我們分別提供createTodo方法,主要使用push方法,把信息添加到Todos數組的最後:

createTodo(item) {
    this.Todos.push(item);
    this.setTodos(this.Todos);
    this.selectedIndex = -1;
    this.selectedItem = {}
    this.addDialogVisible = false;
},

修改功能

首先,在TodoList.vue中提供一個編輯按鈕及編輯頁面組件:

<button @click="editTodo(index)">編輯</button>
<TodoEdit :dialogVisible="editDialogVisible" :selectedItem="selectedItem" @save="updateTodo"  @cancel="cancel"></TodoEdit>

接下來,TodoList.vue中提供editTodo方法,控制TodoEdit頁面是否顯示:

editTodo(index) {
    this.selectedIndex = index;
    this.selectedItem = JSON.parse(JSON.stringify(this.Todos[index]));
    this.editDialogVisible = true;
},

接下來,在TodoEdit.vue中提供一個save和cancel方法,分別調用TodoList.vue中的updateTodo和cancel方法:

save() {
    this.$emit('save', this.selectedItem);
},
cancel() {
    this.$emit('cancel');
}

最後,我們分別提供updateTodo方法,更新信息到Todos數組:

updateTodo(item) {
    this.Todos[this.selectedIndex] = item;
    this.setTodos(this.Todos);
    this.selectedIndex = -1;
    this.selectedItem = {}
    this.editDialogVisible = false;
},

刪除功能

在vue中提供一個deleteTodo方法,刪除時,通過splice(index, 1),可以刪除index位置的數據,頁面上的數據自動就會更新:

deleteTodo(index) {
    this.Todos.splice(index, 1);
    this.selectedIndex = -1;
    this.selectedItem = {}
},

小結

目前為止,我們完成了Vue的CRUD,其實裏面的難點不太多,主要是練習下組件間的數據與事件傳遞。

文中用到的代碼我們放在://github.com/zcqiand/miscellaneous/tree/master/vue