vue todolist實現增刪改查
阿新 • • 發佈:2019-02-01
new Vue({
el: "#todo",
data: {
newTask: "",
tasks: [],
editingTask: {}
},
methods: {
/*增*/
addTask: function () {
var _this = this;
var task = this.newTask.trim();
if (task) {
axios.get('addMes.php', {
params: {
todoText: task
}
})
.then(function (response) {
/*console.log(response);
_this.tasks.push({
todoText: task
});
_this.newTask = "";*/
axios.get('queryMes.php' )
.then(function (response) {
_this.tasks = response.data.result;
})
})
.catch(function (error) {
console.log(error);
});
}
},
/*刪*/
removeTask: function (index, id) {
var _this = this;
axios.get('delectMes.php', {
params: {
todoId: id,
}
})
.then(function (response) {
_this.tasks.splice(index, 1);
})
.catch(function (error) {
console.log(error);
});
},
/*改*/
editTask: function (task) {
this.editingTask = task;
},
/*修改提交*/
endEditing: function (id, todoText) {
this.editingTask = {};
var _this = this;
axios.get('editMes.php', {
params: {
todoId: id,
todoText: todoText
}
})
.then(function (response) {
})
.catch(function (error) {
console.log(error);
});
}
},
created() {
var _this = this;
//獲取資料
axios.get('queryMes.php')
.then(function (response) {
_this.tasks = response.data.result;
})
.catch(function (error) {
console.log(error);
});
}
});