The page loads all the data for the first time and clicks the current date to show the data ideas after Filter

datalist is the original data, and datafilter is the data after Filter. Use datafilter to loop

set up two empty arrays. For the first request, both arrays have the current month"s data, and then click on the date method to execute. After using the original data Filter, give it to datafilter,

.

I want to know if there is a better way to achieve it.

<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)
        }
    },
}
Mar.22,2021

Let me explain the comments above on computed
.

Vue is responsive, which means that a good design pattern is to keep only source data , and to hand over further transformations to the framework . In other words, does not add unnecessary states . So my suggestion is to put datafilter in computed .


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

to

// 2018/07/26,0replace
// data.replace(/\//g, '-')
// 0
const b = `${a[0]}-${a[1].padStart(2, '0')}-${a[2].padStart(2, '0')}`;
Menu