在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 如何用關(guān)鍵字篩選一個vuex獲取的數(shù)組

如何用關(guān)鍵字篩選一個vuex獲取的數(shù)組

需求是，目前有一個數(shù)組是通過后端請求獲取數(shù)據(jù)項 然后mutation到vuex中，然后有個input框需要對數(shù)組項中的某個屬性名進行篩選，需要mutation成新的數(shù)組，但是input退格為空之后需要恢復到原來的vuex數(shù)組，并且篩選完成過程后，可能通過websocket推送會給原來的vuex數(shù)組push新的數(shù)據(jù)項，如果新推送的數(shù)據(jù)項不符合關(guān)鍵字也將被filter掉， 問下這要如何實現(xiàn)。。感覺有點難。

     let that = this
     if (this.channels) {
       return this.channels.filter(function (channel, index) {
         return channel.channelName.toLowerCase().indexOf(that.search.toLowerCase()) !== -1
       })
     } else {
      return []
     }

原來沒用vuex之前是這樣的算法。。但是現(xiàn)在需要使用vuex了，因為業(yè)務(wù)多了

回答
編輯回答
賤人曾

我的思路是你的vuex始終存儲后端返回的全量數(shù)據(jù)，不要在這去做過濾，當websocket數(shù)據(jù)過來的時候就是直接在這個數(shù)組上push數(shù)據(jù)了。接下來就是過濾邏輯了，這部分數(shù)據(jù)其實就是通過input的值篩選vuex中的數(shù)據(jù)的結(jié)果，所以你可以用一個computed屬性，然后在模板中使用這個計算屬性：

computed: {
    filteredChannel () {
        let search = this.search.toLowerCase()
        return (this.channels || []).filter(channel => channel.channelName.toLowerCase().indexOf(search) !== -1)
    }
}
2018年4月26日 20:56