In my current scenario, I am making two different API calls using Axios in my application. The first call fetches a complete JSON file that populates a table, while the second call retrieves only categories. This setup is due to the complexity of the app, which is gradually being upgraded from an older framework. I have implemented two dropdowns - one for selecting years (which also builds the table) and the other for selecting categories. When the application loads, the table is initially populated with data for the current year.
My main query revolves around creating a custom computed filter to dynamically filter the table based on the selected category from the second dropdown. For example, upon selecting '2019' from the first dropdown, the entire table is loaded. Subsequently, choosing a specific category like "Name" should trigger an update that displays rows containing that particular category. Despite trying out various approaches, I'm struggling to conceptualize this particular functionality.
Here's a snippet of my current code:
data() {
return {
year:[],
category:[] ,
tableData:[],
}
},
computed: {
axiosParams(){
const params = new URLSearchParams();
params.append('year', this.year);
return params;
},
methods: {
getYears: function(){
axios.get('myUrl', {
params: this.axiosParams
}).then((response) => {
this.year = response.data;
console.log(response.data)
this.tableData = response.data.result;
})
.catch((err) => {
console.log(err);
});
},
getCategory: function(){
let category = [];
axios.get('mySecondUrl').then((response, i) => {
this.category = response.data
for (var i = 0; i < category.length; i++) {
let catType = i
this.catType = response.data[i].name;
console.log(catType);
}
})
.catch((err) => {
console.log(err);
})
}
}
created: {
this.getYears();
this.getCategory();
}
Here's the HTML markup:
<select v-model="selectedYear" @change="yearSelected">
<option v-for="year in years" :key="year"> {{year}} </option>
</select>
<select v-model="selectedCat" >
<option v-for="(item, index) in category" :item="item"
:key="index" :value="item.name"> {{ item.name }} </option>
</select>