AXIOS VueJs передает параметр ответа в v-for

Question

У меня есть приложение VueJs и передача вызовов API с использованием AXIOS . В рамках текущего сценария пользователь может нажать кнопку, которая выполнит функцию и отобразит список всех уникальных производителей. Внутри списка назначена кнопка, которая должна позволять пользователю видеть все модели под производителем. На данный момент я не уверен, как подключиться к функциям, поэтому при нажатии на один объект он вернет пользователю представление фильтра, в котором будут показаны модели, назначенные производителю.

Ниже я отобразил свой код

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, который отображает только уникальных производителей

    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, которая отображает модели в разделе Производитель

 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)

                })

        },

Если это поможет, также добавил пример того, как ответ появляется в простом массиве

[
{"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"},
]

Answer 1

В шаблоне у вас есть ниже:

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

Но это должно быть:

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

, поскольку manufacturerResponse.manufacturerId - это идентификатор, который вы отображаете в данный момент, и нажатие кнопки должно получить модели для этого идентификатора.

getModels() получит этот параметр как getModels(manufacturerId), а затем использует его для фильтрации, как показано ниже:

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

Answer 2

Метод show () должен быть настроен для принятия параметра response.manufactuerId

Итак ...

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

Теперь ... внутри вашего экземпляра Vue

вам нужно убедиться, что метод show выглядит примерно так ...

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
}

Вероятно, вы можете просто обойти метод show и просто вызвать событие click для вызова getModels напрямую и передать в изготовитель напрямую.