如何使用 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将选中的品牌存入data中

<input type="radio"
  :id="brand.id"
  name="brand"
  v-model="selectedBrand"
>

现在您应该在查询参数中传递 brand 名称，如下所示：

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

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

在渲染/models页面的组件中，调用带有brand-name的api请求

<template>
  <div v-if="brandModels.length">
    {{ brandModels }}
  </div>

  <div v-else>Loading...</div>
</template>

<script>
export default {
  data() {
    return {
      brandModels: []
    };
  },
  async mounted() {
    try {
      const url = `https:***/models?brand=${this.$route.query.brand}`;
      const response = await this.axios.get(url);
      this.brandModels = response.data
    } catch (error) {
      // handle error
    }
  }
};
</script>

更新 selectedBrand 存储在组件数据中

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