Conditional loading of large json files with axios.get - json

Question

A large json file is fetched with the below. It works as expected, however, since the case_data.json is large, the page takes up to two minutes to render.
export default {
name: "cases",
data() {
return {
columns: ['Case number', 'Summary', 'Name', 'Address'],
cases: []
};
},
methods: {
fetchData(){
axios.get('/case_data.json').then(response => {
this.cases = response.data;
})
}
},
created(){
this.fetchData();
}
};
It contains cases from several months, so the idea is to break it down into daily or weekly data portions and only import what is required at the time. The expectation is to improve performance. I would like to pass an input parameter to fetchData() and load a smaller dataset. Does the below approach make sense? Is the fetchData() code correct?
export default {
name: "cases",
props: {
day: {
required: true,
type: String
}
},
data() {
return {
columns: ['Case number', 'Summary', 'Name', 'Address'],
cases: []
};
},
methods: {
fetchData(this.day){
if(this.day == 'day1') axios.get('/case_data_day1.json').then(response => {this.cases = response.data;})
else if(this.day == 'day2') axios.get('/case_data_day2.json').then(response => {this.cases = response.data;})
...
else if(this.day == 'dayN') axios.get('/case_data_dayN.json').then(response => {this.cases = response.data;})
}
},
created(){
this.fetchData();
}
};

Answer 1

use the below code instead, its dynamic, you don't have to write manual condition and it will fetch the data upon this.day and use fetchData() on mounted hook.
methods: {
fetchData(){
let that = this
axios.get(`/case_data_${that.day}.json`).then(response => {that.cases = response.data;})
}
},
mounted(){
this.fetchData();
}