AXIOS VueJs passing response parameter within v-for

Question

I have creating VueJs application and passing API calls using AXIOS. Within current scenario user is able to click a button, which will execute function and display list of all unique manufacturers. Within the list a button is assigned, which should let user to see all the models under the manufacturer. As of yer I am unsure how to connect to functions so when clicking on one object it will return user a filter view where models assigned to manufacturer will be showed.

Below I have displayed my code

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, which displays 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, which displays 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)

                })

        },

If it helps also added example how the response appears in the 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"},
]

Gowri · Accepted Answer · 2019-01-13 00:02:28Z

1

In template you have below:

v-on:click="show(); getModels(response.manufactuerId);"

But it should be:

v-on:click="show(); getModels(manufacturerResponse.manufacturerId);"

since manufacturerResponse.manufacturerId is the id you are currently displaying and the button click should get the models for that id.

getModels() would receive that param like getModels(manufacturerId) then use that to filter as below:

this.testResponse = response.data.filter (kp6 => kp6.manufacturerId === manufacturerId);

answered Jan 13, 2019 at 0:02

Gowri

3942 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jremi · Accepted Answer · 2019-01-10 16:02:34Z

0

The show() method should be setup to accept a parameter of response.manufactuerId

So ...

v-on:click="show(response.manufacturerId);"

Now... inside your Vue instance

you will need to make sure the method for show looks something like this...

show(manufacturerId){
    this.getModels(manufacturerId) // This will call the getModels method on the Vue instance and pass in the manufacturerId that you provided via your click event
}

You can probably just bypass the show method and just have the click event call getModels directly and pass in the manufacturerId directly.

answered Jan 10, 2019 at 16:02

jremi

2,9895 gold badges29 silver badges37 bronze badges

2 Comments

Lv007 Over a year ago

the show appears to have been misleading as it controls the modal in which the results will be displayed

jremi Over a year ago

Either way... you need to add an argument to your getModels method.... getModels(id) .... you can then use this id to pass into your axios api call.

Collectives™ on Stack Overflow

AXIOS VueJs passing response parameter within v-for

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related