隱藏錶行直到搜索（filterBy）完成

我正在使用Vue.js（目前v.1.x，將很快更新），並且我想要一個包含一些數據的錶行。我正在使用Vue.js組件過濾filterBy的表格行，但我希望在執行任何搜索/過濾之前隱藏表格行。隱藏錶行直到搜索（filterBy）完成

請問有人可以幫我嗎？我應該在某處放置某種事件監聽器嗎？最好的地方放在哪裏？

這裏有一個的jsfiddle：https://jsfiddle.net/m7sgaron/863/

Vue.component('demo-grid', { 
 
    template: '#grid-template', 
 
    props: { 
 
    data: Array, 
 
    columns: Array, 
 
    filterKey: String 
 
    }, 
 
    data: function() { 
 
    var sortOrders = {} 
 
    this.columns.forEach(function (key) { 
 
     sortOrders[key] = 1 
 
    }) 
 
    return { 
 
     sortKey: '', 
 
     sortOrders: sortOrders 
 
    } 
 
    }, 
 
    methods: { 
 
    sortBy: function (key) { 
 
     this.sortKey = key 
 
     this.sortOrders[key] = this.sortOrders[key] * -1 
 
    } 
 
    } 
 
}) 
 

 
// bootstrap the demo 
 
var demo = new Vue({ 
 
    el: '#demo', 
 
    data: { 
 
    searchQuery: '', 
 
    gridColumns: ['name', 'power'], 
 
    gridData: [ 
 
     { name: 'Chuck Norris', power: Infinity }, 
 
     { name: 'Bruce Lee', power: 9000 }, 
 
     { name: 'Jackie Chan', power: 7000 }, 
 
     { name: 'Jet Li', power: 8000 } 
 
    ] 
 
    } 
 
})

body { 
 
    font-family: Helvetica Neue, Arial, sans-serif; 
 
    font-size: 14px; 
 
    color: #444; 
 
} 
 

 
table { 
 
    border: 2px solid #42b983; 
 
    border-radius: 3px; 
 
    background-color: #fff; 
 
} 
 

 
th { 
 
    background-color: #42b983; 
 
    color: rgba(255,255,255,0.66); 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -user-select: none; 
 
} 
 

 
td { 
 
    background-color: #f9f9f9; 
 
} 
 

 
th, td { 
 
    min-width: 120px; 
 
    padding: 10px 20px; 
 
} 
 

 
th.active { 
 
    color: #fff; 
 
} 
 

 
th.active .arrow { 
 
    opacity: 1; 
 
} 
 

 
.arrow { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: 5px; 
 
    opacity: 0.66; 
 
} 
 

 
.arrow.asc { 
 
    border-left: 4px solid transparent; 
 
    border-right: 4px solid transparent; 
 
    border-bottom: 4px solid #fff; 
 
} 
 

 
.arrow.dsc { 
 
    border-left: 4px solid transparent; 
 
    border-right: 4px solid transparent; 
 
    border-top: 4px solid #fff; 
 
} 
 

 
#search { 
 
    margin-bottom: 10px; 
 
}

<script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.js"></script> 
 
<!-- component template --> 
 
<script type="text/x-template" id="grid-template"> 
 
    <table> 
 
    <tbody> 
 
     <tr v-for=" 
 
     entry in data 
 
     | filterBy filterKey 
 
     | orderBy sortKey sortOrders[sortKey]"> 
 
     <td v-for="key in columns"> 
 
      {{entry[key]}} 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</script> 
 

 
<!-- demo root element --> 
 
<div id="demo"> 
 
    <form id="search"> 
 
    Search <input name="query" v-model="searchQuery"> 
 
    </form> 
 
    <demo-grid 
 
    :data="gridData" 
 
    :columns="gridColumns" 
 
    :filter-key="searchQuery"> 
 
    </demo-grid> 
 
</div>

來源

2017-05-26 Jesper

[請不要把問題標題標籤（https://stackoverflow.com/help/tagging） – Liam

@BelminBedak完全一樣，添加爲答案，我會將其標記爲解決方案！ – Jesper

我刪除了評論，因爲我想我已經理解了你的需求，我也看到你已經提供了答案。 –

最簡單的方法將使用條件指令如v-show或v-if上tr陽性表達會檢查確實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>

工作演示：https://jsfiddle.net/zp0m0om6/2/

來源

2017-05-26 14:06:10

隱藏錶行直到搜索（filterBy）完成

回答

相關問題