So verwenden Sie axios vue.js, um die API zu verwenden

Question

Ich habe eine Liste von Automarken mit Optionsfeldern. Wie kann ich eine Reihe von Automodellen vom Server abrufen und sie nach Auswahl einer Marke auf einer neuen Seite anzeigen? Welche konkreten Maßnahmen sind hierfür erforderlich? Vielen Dank, dass Sie das gelesen haben

<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: ""
   };
}
//...