I have a list of car brands with radio buttons. After selecting a certain brand, how can I get a series of car models from the server and display them on a new page? What specific actions are needed to do this? Thank you very much for reading this article
<script>
export default {
name: 'Brands',
data() {
return {
brands: []
}
},
methods: {
next: function () {
this.$router.push({path: '/model'})
},
},
mounted() {
this.axios
.get('https:***')
.then(response => (this.brands = response.data.brands))
.catch(error => {
console.log(error)
})
},
}
</script>
<template>
<div class="alphabet-wrap">
<ul class="alphabet">
<li v-for="brand in brands"
:key="brand.name"
:class="brand.id"
>
<label :for="brand.id"
@change="next"
>
<input type="radio"
:id="brand.id"
name="brand"
>
<span class="text">{{ brand.name }}</span>
</label>
</li>
</ul>
</div>
</template>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
First, store the selected brand in the data using v-model
Now you should pass thebrand name in the query parameter like this:
this.$router.push({ path: '/models', query: { brand: this.selectedBrand } }) // Route will be like https://example.com/models?brand=brand-name In the component that renders the/models
page, call the api requestwith brand name{{ brandModels }}
Loading...
renew selectedBrand
//... data() { return { selectedBrand: "" }; } //...Stored in component data