頁(yè)面首次加載所有數(shù)據(jù)與點(diǎn)擊當(dāng)前日期展示過濾之后的數(shù)據(jù)思路

datalist是原始數(shù)據(jù)，datafilter是過濾之后的數(shù)據(jù)，用datafilter去做循環(huán)

建立兩個(gè)空數(shù)組，第一次請(qǐng)求，兩個(gè)數(shù)組都有當(dāng)月數(shù)據(jù)，然后點(diǎn)擊日期的那個(gè)方法執(zhí)行之后，采用原始數(shù)據(jù)過濾之后給datafilter，

我想知道大家還有更好的方式實(shí)現(xiàn)嘛？

<div class="d-list-cont" v-if="datafilter.length>0">
    <div class="d-list" v-for="(item,index) in datafilter" :key="index">
        ........................
    </div>
</div>
<div class="no-data" v-else>
    <div class="img"></div>
</div>



data() {
    return {
        datalist:[],
        datafilter:[],
    }
},

methods:{
    getData(){
        this.$get('接口地址',請(qǐng)求參數(shù))
        .then(response=> {
            this.datalist=response
            this.datafilter=response
        })
        .catch(error=> {
            //alert('錯(cuò)誤')
        });
    },
    //點(diǎn)擊日期的方法
    clickDay(data) {
        //把2018/07/26 格式化符合后端需求格式一樣的
        var a = data.split('/');
        var b = a[0] + '-' + (a[1] < 10 ? '0':'') + a[1]+'-'+ (a[2] < 10 ? '0':'')+a[2];
        if(this.datalist){
            this.datafilter=this.datalist.filter(o=>o.recoverTime===b)
        }
    },
}

回答

編輯回答

扯機(jī)薄

我解釋一下上面關(guān)于computed的評(píng)論吧

Vue是響應(yīng)式的，這就意味著一個(gè)好的設(shè)計(jì)模式是只保存源數(shù)據(jù)，進(jìn)一步的變換交給框架。換言之，就是不增加沒有必要的狀態(tài)。所以我的建議是把datafilter放到computed里面。

{
    data() {
        return {
            datalist: [],
            // filter就應(yīng)該存filter，如果按原來(lái)的邏輯，應(yīng)該叫filteredDataList
            // 其實(shí)我更喜歡selectedDate，更加明確
            // datafilter: null,
            selectedDate: null,
        }
    },

    computed: {
        filteredDatalist() {
            if (this.selectedDate) {
                return this.datalist.filter(({ recoverTime }) => recoverTime === this.selectedDate);
            }
            else {
                return this.datalist;
            }
        }
    },

    methods: {
        getData() {
            this.$get('接口地址', 請(qǐng)求參數(shù))
                .then(response => {
                    this.datalist = response
                })
                .catch(error => {
                });
        },

        clickDay(date) {
            var a = date.split('/');
            // 用樓上的方式更優(yōu)雅一些
            this.selectedDate = a[0] + '-' + (a[1] < 10 ? '0' : '') + a[1] + '-' + (a[2] < 10 ? '0' : '') + a[2];
        },
    },
}

好處都有啥？~~誰(shuí)說對(duì)了就給他~~

解開了計(jì)算過程和點(diǎn)擊按鈕的耦合。假如以后想要加上前一天/后一天的功能，只需要寫日期加減本身的代碼，不用再?gòu)?fù)制粘貼計(jì)算過程了；
解開了datalist生命周期的限制。假如以后想要加上datalist實(shí)時(shí)更新的功能，只需要定時(shí)getData就行了（或者用websocket，不論是啥），不需要用戶觸發(fā)clickDay就能自動(dòng)刷新；
Vue會(huì)智能地管理computed屬性的緩存，如果用戶clickDay兩次都相同，只會(huì)計(jì)算一次。

其實(shí)這種思想已經(jīng)很函數(shù)式了，相當(dāng)像Rx。但是Vue的學(xué)習(xí)成本比Rx低得多，這么簡(jiǎn)單就能用上函數(shù)式，何樂不為？

2018年4月22日 11:35

編輯回答

假灑脫

我就覺得這兩句可以換一個(gè)優(yōu)雅點(diǎn)的方式

var a = data.split('/');
var b = a[0] + '-' + (a[1] < 10 ? '0':'') + a[1]+'-'+ (a[2] < 10 ? '0':'')+a[2];

改為

// 如果你的數(shù)據(jù)結(jié)構(gòu)是2018/07/26,為什么還要去判斷加0，直接用replace替換不好嗎
// data.replace(/\//g, '-')
// 加0寫法
const b = `${a[0]}-${a[1].padStart(2, '0')}-${a[2].padStart(2, '0')}`;

2017年9月11日 21:46