如何使用 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请求

sssccc

更新 selectedBrand 存储在组件数据中

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