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

AI代筆發表於2020-10-28
Vue

目標

使用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，其實裡面的難點不太多，主要是練習下元件間的資料與事件傳遞。

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

相關文章