I have been developing a VueJs application that makes API calls using AXIOS. In the current setup, users can click a button to display a list of unique manufacturers. Each manufacturer in the list has a button assigned to it, allowing users to view all models under that manufacturer. However, I am still figuring out how to connect functions so that clicking on an object will show a filtered view of models specific to that manufacturer.
Below is the code snippet:
VueJs
<div v-for="(manufacturerResponse) in manufacturerResponse ">
<p> <b>Manufacturer ID {{manufacturerResponse.manufacturerId}} </b>
<b-btn variant="warning" v-on:click="show(); getModels(response.manufactuerId);">View Models</b-btn>
</p>
</div>
AXIOS - getManufacturer, displaying only unique Manufacturers
getManufacturers () {
AXIOS.get(`/url/`)
.then(response => {
console.log(this.manufacturerResponse)
this.response = response.data
this.manufacturerResponse = []
response.data.forEach(item => {
if (!this.manufacturerResponse.some(fltr => {
return item.manufacturerId == fltr.manufacturerId
})) {
this.manufacturerResponse.push(item);
}
});
})
},
AXIOS - getModel, showing models under Manufacturer
getModels () {
AXIOS.get(`/url/`)
.then(response => {
const id = 0;
this.testResponse = response.data.filter (kp6 => kp6.manufacturerId === this.manufacturerResponse[id].manufacturerId );
console.log(this.testResponse)
})
},
In addition, I have included an example of how the response appears in a simple array:
[
{"id":1,"manufacturerId":1,"model":"Focus"},
{"id":2,"manufacturerId":1,"model":"Transit"},
{"id":3,"manufacturerId":2,"model":"Clio"},
{"id":4,"manufacturerId":3,"model":"Niva"},
{"id":5,"manufacturerId":3,"model":"Yaris"},
]