Cara menggunakan axios vue.js untuk menggunakan api
P粉277824378
P粉277824378 2024-02-25 18:41:54
0
1
429

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>

P粉277824378
P粉277824378

membalas semua(1)
P粉662361740

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: ""
   };
}
//...
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan