实现清空搜索框后展示所有列表内容

实现清空搜索框后展示所有列表内容。
使用vue侦探属性可以很简单实现。但是遇到了一个问题，因为在清空按钮是增加了显示与隐藏，点击后直接被隐藏掉，导致后面的侦探属性侦听不到值的变化。

 searchValue: {
            handler: function (n, o) {
                console.log("new");
                if (n == "") {
                    this.reportList = this.allReportList;
                }
            }
        }

<div class="form">
                    <input v-model="searchValue" type="search" placeholder="请输入您要搜索的内容..." >
                    <!-- <i v-show="searchValue.length" class="el-icon-close" @click="clear"></i> -->
                    <div class="close" v-show="searchValue.length">
                        <i class="el-icon-close" @click="clear"></i>
                    </div>
                    <button @click="searchReportList"><i class="el-icon-search"></i></button>
  </div>

解决方法是外面嵌套div，在div上绑定v-show。

增加enter键搜索

<input v-model="searchValue" type="search" placeholder="请输入您要搜索的内容..."  @keyup.enter="searchReportList">

可以根据当前选中的选项卡内搜索，如果取消则返回的是当前选项卡的内容。

searchValue: {

            handler: function (n, o) {

                if (n == "") {
                    // this.reportList = this.allReportList;
                    this.reportList = this.allReportList.filter((it) => {
                        return it.categoryId == this.currentId;
                    })
                    if(this.reportList.length==0){
                        this.reportList = this.allReportList;
                    }
                }
            }
        }

e.target.innerHTML多次点击后会出现乱码，并不是想要的数据。不知道是什么原因。最后把按钮用v-for循环显示内容，获取item就不会了。