亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

頁面首次加載所有數據與點擊當前日期展示過濾之后的數據思路

頁面首次加載所有數據與點擊當前日期展示過濾之后的數據思路

拉莫斯之舞 2019-03-15 10:15:54
datalist是原始數據,datafilter是過濾之后的數據,用datafilter去做循環建立兩個空數組,第一次請求,兩個數組都有當月數據,然后點擊日期的那個方法執行之后,采用原始數據過濾之后給datafilter,我想知道大家還有更好的方式實現嘛?<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('接口地址',請求參數)        .then(response=> {            this.datalist=response            this.datafilter=response        })        .catch(error=> {            //alert('錯誤')        });    },    //點擊日期的方法    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)        }    },}
查看完整描述

2 回答

?
侃侃無極

TA貢獻2051條經驗 獲得超10個贊

我解釋一下上面關于computed的評論吧

Vue是響應式的,這就意味著一個好的設計模式是只保存源數據,進一步的變換交給框架。換言之,就是不增加沒有必要的狀態。所以我的建議是把datafilter放到computed里面。

{

    data() {

        return {

            datalist: [],

            // filter就應該存filter,如果按原來的邏輯,應該叫filteredDataList

            // 其實我更喜歡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('接口地址', 請求參數)

                .then(response => {

                    this.datalist = response

                })

                .catch(error => {

                });

        },


        clickDay(date) {

            var a = date.split('/');

            // 用樓上的方式更優雅一些

            this.selectedDate = a[0] + '-' + (a[1] < 10 ? '0' : '') + a[1] + '-' + (a[2] < 10 ? '0' : '') + a[2];

        },

    },

}

好處都有啥?誰說對了就給他

  1. 解開了計算過程和點擊按鈕的耦合。假如以后想要加上前一天/后一天的功能,只需要寫日期加減本身的代碼,不用再復制粘貼計算過程了;

  2. 解開了datalist生命周期的限制。假如以后想要加上datalist實時更新的功能,只需要定時getData就行了(或者用websocket,不論是啥),不需要用戶觸發clickDay就能自動刷新;

  3. Vue會智能地管理computed屬性的緩存,如果用戶clickDay兩次都相同,只會計算一次。

其實這種思想已經很函數式了,相當像Rx。但是Vue的學習成本比Rx低得多,這么簡單就能用上函數式,何樂不為?


查看完整回答
反對 回復 2019-04-09
?
慕虎7371278

TA貢獻1802條經驗 獲得超4個贊

我就覺得這兩句可以換一個優雅點的方式


var a = data.split('/');

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

改為


// 如果你的數據結構是2018/07/26,為什么還要去判斷加0,直接用replace替換不好嗎

// data.replace(/\//g, '-')

// 加0寫法

const b = `${a[0]}-${a[1].padStart(2, '0')}-${a[2].padStart(2, '0')}`;


查看完整回答
反對 回復 2019-04-09
  • 2 回答
  • 0 關注
  • 419 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號