vue案例之bugList

大家好，欢迎来到IT知识分享网。

一、动态列表

二、保存bug

• 不能在子组件中修改父组件传来的对象，从父组件中传方法
• 描述不能为空
• 添加数组得用响应式api unshift()

代码实现：

• bugHeader.vue

<template> <div class="header"> <textarea cols="105" rows="4" placeholder="请输入BUG的描述信息" v-model="desc"></textarea> <br> <button class="small green button" @click="saveBug">保存</button> </div> </template> <script> export default { 
    data(){ 
    return { 
    desc:'' } }, props:['saveBugCallback'], methods:{ 
    saveBug(){ 
    //desc不能为空 if(!this.desc.trim()) return; let bug={ 
   id:Date.now() ,desc:this.desc,resolved:false} //添加数组 this.saveBugCallback(bug) console.info(this.desc.trim()) //清空desc this.desc='' } } } </script> <style scoped> /* header */ .header { 
    margin-bottom: 20px; margin-top: 20px; } </style> 

• app.vue

<template> <div class="app"> <bugHeader :saveBugCallback="saveBugCallback"></bugHeader> <bugList :bugList="bugList"></bugList> <bugFooter></bugFooter> </div> </template> 。。。。。。。。。。。。。。。。。。。。。 methods:{ 
    saveBugCallback(bug){ 
    //响应式添加数组 this.bugList.unshift(bug) } } 

三、修改bug状态

• app.vue

//修改bug状态 modifyResolvedCallback(bug){ 
    this.bugList.forEach(element => { 
    if(element.id==bug.id){ 
    element.resolved=!element.resolved } }); } 

item中调用modifyResolvedCallback(bug)方法即可

四、删除bug

根据id删除对应的bug

五、全选和取消全选

allSelect(e){ 
    let flag=e.target.checked; this.allSelectCallback(flag) } //app.vue中写 //全选与取消全选 allSelectCallback(flag){ 
    this.bugList.forEach(bug=>{ 
   bug.resolved=flag}) }, 

注意：难点在于全部选中bug，全选框自动选中和全选框选中后取消某一个bug。这里的解决方法是，每次选完bug后遍历数组，如果全部的resolved都等于true则全选选中，否则全选取消。

1. item.vue

modifyResolved(bug){ 
    this.modifyResolvedCallback(bug) this.checkAllSelectCallback(); }, 

2.app.vue

//检查是否全选 checkAllSelectCallback(){ 
    let n=false; this.bugList.forEach(bug=>{ 
    if(!bug.resolved) { 
    n=true; return; } }) this.flag=n==true?false:true } } 

3. bugList.vue

watch:{ 
    //监听flag变化，保持checked与flag一致 flag(){ 
    console.info("watch:flag="+this.flag) //获取html的doc元素 this.$refs.c1.checked=this.flag } } 

六、重要知识点

1. 通过ref获取html中doc元素的属性

//标记ref <input type="checkbox" @click="allSelect($event)" ref="c1"> //获取html的doc元素 this.$refs.c1.checked=this.flag 

2. 通过事件对象获取doc对象的属性值

<input type="checkbox" @click="allSelect($event)" ref="c1"> let flag=event.target.checked; 

3. 指针变小手

.desc{ cursor: pointer; }