如何使用 axios vue.js 來使用 api

Question

我有一個單選按鈕汽車品牌列表，選擇某個品牌後如何從伺服器獲取一系列車型並將其顯示在新頁面上？為此需要採取哪些具體行動？非常感謝您閱讀這篇文章

<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

首先，使用v-model將選定的品牌儲存在資料中

現在您應該在查詢參數中傳遞品牌名稱，如下所示：

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

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

在渲染/models頁面的元件中，呼叫帶有品牌名稱的api請求

更新 selectedBrand 儲存在元件資料中

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