How to use axios vue.js to use api

Question

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>

Answer 1

First, store the selected brand in the data using v-model

Now you should pass the

brand 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 request with brand name

renew selectedBrand Stored in component data

//... data() { return { selectedBrand: "" }; } //...