Comment utiliser axios vue.js pour utiliser l'API

Question

J'ai une liste de marques de voitures avec des boutons radio, comment puis-je obtenir une gamme de modèles de voitures depuis le serveur et les afficher sur une nouvelle page après avoir sélectionné une marque ? Quelles actions spécifiques sont nécessaires pour y parvenir ? Merci beaucoup d'avoir lu ceci

<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

Tout d'abord, stockez la marque sélectionnée dans les données en utilisant v-model

Maintenant, vous devez transmettre le nom de la marque dans les paramètres de requête comme ceci :

this.$router.push({
 path: '/models',
 query: {
   brand: this.selectedBrand
 }
})

// Route will be like https://example.com/models?brand=brand-name

Dans le composant qui affiche la /modelspage, appelez la requête API avec le nom de marque

sssccc

Mise à jour selectedBrand Stocké dans les données des composants

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