Question

我已经创建了 VueJs 应用程序，并使用 AXIOS 传递了API调用。在当前情况下，用户可以单击一个按钮，该按钮将执行功能并显示所有唯一制造商的列表。在列表中分配了一个按钮，该按钮应使用户可以查看制造商下的所有型号。从yer开始，我不确定如何连接功能，因此在单击一个对象时，它将向用户返回一个筛选器视图，其中将显示分配给制造商的模型。

下面我显示了我的代码

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是您当前正在显示的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(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。

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

2 个答案: