Javascript 隐藏表行，直到完成搜索（filterBy）

我正在使用Vue.js（目前是v.1.x，不久将更新），我想要一个包含一些数据的表行表。我正在使用Vue.js组件使用

filterBy

筛选表行，但我希望在完成任何搜索/筛选之前隐藏表行

谁能帮我一下吗？我应该在某处放置某种事件侦听器吗？放在哪里最好

下面是一个JSFIDLE：

Vue.component（'demo-grid'{
模板：“#网格模板”，
道具：{
数据：数组，
列：数组，
filterKey:字符串
},
数据：函数（）{
var sortOrders={}
this.columns.forEach（函数（键）{
排序器[键]=1
})
返回{
排序键：“”，
巫师：巫师
}
},
方法：{
排序：功能（键）{
this.sortKey=key
this.sortOrders[key]=this.sortOrders[key]*-1
}
}
})
//引导演示
var demo=新的Vue({
el:'演示'，
数据：{
searchQuery:“”，
gridColumns:['name'，'power']，
网格数据：[
{name:'Chuck Norris'，power:Infinity}，
{姓名：'李小龙'，功率：9000}，
{姓名：'成龙'，功率：7000}，
{名称：'李连杰'，功率：8000}
]
}
})

正文{
字体系列：Helvetica Neue，Arial，无衬线；
字体大小：14px；
颜色：#444；
}
桌子{
边框：2px实心#42b983；
边界半径：3px；
背景色：#fff；
}
th{
背景色：#42b983；
颜色：rgba（255255,0.66）；
光标：指针；
-webkit用户选择：无；
-moz用户选择：无；
-用户选择：无；
}
运输署{
背景色：#f9f9f9；
}
th，td{
最小宽度：120px；
填充：10px 20px；
}
积极的{
颜色：#fff；
}
活动箭头{
不透明度：1；
}
.阿罗{
显示：内联块；
垂直对齐：中间对齐；
宽度：0；
身高：0；
左边距：5px；
不透明度：0.66；
}
.arrow.asc{
左边框：4px实心透明；
右边框：4px实心透明；
边框底部：4px实心#fff；
}
.arrow.dsc{
左边框：4px实心透明；
右边框：4px实心透明；
边框顶部：4px实心#fff；
}
#搜寻{
边缘底部：10px；
}

{{entry[key]}
搜寻

最简单的方法是在

tr

上使用条件指令，如

v-show

或

v-if

。表达式将检查

searchQuery

是否有一定长度

<script type="text/x-template" id="grid-template">
  <table>
    <tbody>
      <tr v-show="filterKey.length" v-for="
        entry in data
        | filterBy filterKey
        | orderBy sortKey sortOrders[sortKey]">
        <td v-for="key in columns">
          {{entry[key]}}
        </td>
      </tr>
    </tbody>
  </table>
</script>

{{entry[key]}

---

工作演示：

@BelminBedak与此完全相同，添加作为答案，我将其标记为解决方案！我删除了评论，因为我认为我误解了你的需要，而且我看到你已经给出了答案。@BelminBedak还是写下答案，我会删除我的，我会把你的作为解决方案