腾飞的评论 • 表/c2092 • 表严肃

腾飞于 2018-07-01 13:16:14 在表/22.14下评论：

将form表单及列表也写成了vue组件，代码如下： main.js代码：Vue.component('task',{ template:'#task-tpl', props:{ todo:{ type:Object } } }) Vue.component('formtpl',{ template:'#form_tpl', props:{ newcurrent:{type:Object} }, data(){ return{ current:{} } }, methods:{ action(){ let obj = {...this.newcurrent,...this.current} this.$emit('submit',obj) this.current = {}; }, inputTitle(value){ this.current.title = value }, textareaDesc(value){ this.current.desc = value }, inputDate(value){ this.current.dateAt = value } } }) new Vue({ el:'#main', data:{ list:[], current:{}, last_id:0, }, methods:{ merge(params){ this.current = {...this.current,...params}; let id = this.current.id; if(id){ let index = this.find_index(id); Vue.set(this.list,index,{...this.current}) } else { if(!this.current.title) return; this.last_id ++; ms.set('last_id',this.last_id); let todo = {id:this.last_id,...this.current}; this.list.push(todo); } this.current = {} }, remove(id){ let index = this.find_index(id) this.list.splice(index,1) }, toggle_complete(id){ let index = this.find_index(id); Vue.set(this.list[index],'completed',!this.list[index].completed) }, set_current(todo){ this.current = Object.assign({},todo) }, reset_current(){ this.set_current({}) }, find_index(id){ return this.list.findIndex(function(item){ return item.id == id; }) } }, watch:{ list:{ deep:true, handler(n){ ms.set('list',n) } } }, mounted() { this.list = ms.get('list') || this.list; this.last_id = ms.get('last_id') || this.last_id; }, }) html文件内容如下： <!DOCTYPE html> Document 表事情开黑了么就写作业？未完成已完成未完成