javascript - AXIOS VueJs 在 v-for 中传递响应参数

Question

我已经创建了 VueJs 应用程序并使用 AXIOS 传递 API 调用。在当前场景中，用户可以单击一个按钮，该按钮将执行功能并显示所有唯一制造商的列表。在列表中分配了一个按钮，它应该让用户看到制造商下的所有模型。到目前为止，我不确定如何连接到函数，因此当单击一个对象时，它将向用户返回一个筛选 View ，其中将显示分配给制造商的模型。

下面我展示了我的代码

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，在 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)

                })

        },

如果有帮助，还添加了响应如何出现在简单数组中的示例

[
{"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 是您当前显示的 ID，单击按钮应该获取该 ID 的模型。

getModels() 会收到像 getModels(manufacturerId) 这样的参数，然后使用它进行如下过滤:

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