vue案例之bugList

案例示意图：

一、动态列表

二、保存bug

1、创建bug对象
2、添加到bugList数组中
3、清空文本域
注意：

• 不能在子组件中修改父组件传来的对象，从父组件中传方法
• 描述不能为空
• 添加数组得用响应式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

五、全选和取消全选

思路：点击全选调用函数先获取复选框的checked,再遍历bugList数组，设置resolved=checked即可
获取复选框checked:<input type="checkbox" @click="allSelect($event)" ref="c1">
传递一个事件对象，并通过事件对象的target获取checked的值，再传递给 allSelectCallback

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;
     }