如何使用 axios vue.js 使用 api

Posted 2023-03-30

【中文标题】如何使用 axios vue.js 使用 api

【英文标题】：How to work with the api using axios vue.js

【发布时间】：2021-11-17 10:11:23

【问题描述】：

我有一个单选按钮汽车品牌列表，我如何在选择某个品牌后从服务器获取一系列车型并将其显示在新页面上？为此需要采取哪些具体行动？非常感谢您阅读本文

<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>

【问题讨论】：

很大程度上取决于您的后端/api 的样子。但总的来说，我会说：选择品牌 -> 使用品牌作为查询参数重定向到新站点，然后通过 get 请求请求所有品牌模型。

【参考方案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: ""
   ;

//...

【讨论】：

我在哪里以及如何存储所选品牌？以及所有后续表格

你应该在组件（渲染表单）数据中定义selectedBrand，检查更新