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

Question

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

下面我显示了我的代码

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);

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，直接传入manufacturerId。