Cara menggunakan axios vue.js untuk menggunakan api

Question

Saya mempunyai senarai jenama kereta dengan butang radio, bagaimana saya boleh mendapatkan rangkaian model kereta daripada pelayan dan memaparkannya pada halaman baharu selepas memilih jenama? Apakah tindakan khusus yang diperlukan untuk melakukan ini? Terima kasih banyak kerana membaca ini

<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

Pertama, simpan jenama yang dipilih dalam data menggunakan v-model

Sekarang anda harus lulus nama jenama dalam parameter pertanyaan seperti ini:

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

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

Dalam komponen yang memaparkan halaman /models, panggil permintaan api dengan nama jenama

sssccc

Dikemas kini selectedBrand Disimpan dalam data komponen

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