Vue - @click 使用 Axios 在两个 API 之间发送 id 值

Question

我被这个问题困住了，在 Vue.JS 文档上找不到解决方案。
这就是我得到的：
我有一个来自 API 的汽车模型列表，其中包含“名称”和“ID”，所以我在单击“显示数据”后，我应该发送 id 以进行第二次 API 调用并显示该模型的所有汽车品牌。 我创建了一个警报，以查看 @click 是否正常工作并收集我需要的 ID。
在我的提醒下，我只获得了型号名称或 ID，我无法将其发送到我的第二个 api url。
这是我获取数组项的数据：

  const API_URL = "https://parallelum.com.br/fipe/api/v1/carros/marcas";
new Vue({
  el: "#app",
  data() {
    return {
      brands: [],
      models: [],
      loading: true,
      errored: false,
    };
  },
  mounted() {
    this.getModels();
    this.getBrands();
  }, 

API 调用方法：

methods: {
async getBrands() {
  await axios
    .get(API_URL)
    .then((response) => {
      this.brands = response.data;
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error);
      this.errored = true;
    })
    .finally(() => (this.loading = false));
},
getBrand() {
  axios
    .get(
      "https://parallelum.com.br/fipe/api/v1/carros/marcas/"+this.brandSelected+"/modelos"
    )
    .then((response) => {
      this.models = response.data.modelos;
      console.log(response.data.modelos);
    });
},  

和我的 @click 与 modelSelected：

brandSelected (brand){
  this.brands = brand.codigo;
  alert(model.codigo);
}
  },
});

我没有让我的第二个 api 调用使用 this.brandSelected 和第一个 api 中的 id。 这是我的 HTML，我在其中调用了第一个 api 和 @click 按钮：

 <tbody v-for="(brand, index) in brands" :key="index">
              <tr>
                <td>{{brand.nome}} com código {{brand.codigo}}</td>
                <td>
                  <a
                    @click="brandSelected(brand)"
                    data-toggle="modal"
                    data-target="#modelsModal"
                    >Ver modelos</a
                  >
                </td>

---

我可以使用我的代码在警报中看到型号名称...但无法使用 this.brandSelected 发送到第二个 api！ 我在哪里做错了？没找到！

---

在这里您可以检查来自 api 的数据： 品牌：

Array [5]
0: Object
nome: "Acura"
codigo: "1"
1: Object
nome: "Agrale"
codigo: "2"
2: Object
nome: "Alfa Romeo"
codigo: "3"
3: Object
nome: "AM Gen"
codigo: "4"
4: Object
nome: "Asia Motors"
codigo: "5"   

带有品牌代码的型号：

Object
anos: Array [5] // not used
modelos: Array [5]
0: Object
nome: "AMAROK CD2.0 16V/S CD2.0 16V TDI 4x2 Die"
codigo: 5585
1: Object
nome: "AMAROK CD2.0 16V/S CD2.0 16V TDI 4x4 Die"
codigo: 5586
2: Object
nome: "AMAROK Comfor. CD 2.0 TDI 4x4 Dies. Aut."
codigo: 8531
3: Object
nome: "AMAROK CS2.0 16V/S2.0 16V TDI 4x2 Diesel"
codigo: 5748
4: Object
nome: "AMAROK CS2.0 16V/S2.0 16V TDI 4x4 Diesel"
codigo: 5749

Answer 1

您似乎将 this.brandSelected 视为 URL 中的字符串，但它似乎只被定义为一种方法。

当您点击一个品牌时，您似乎想要做两件事...

1. 将所选品牌存储在某处，然后
2. 加载品牌模型

尝试这样的事情，并确保检查您的浏览器控制台以查看日志消息和任何错误...

new Vue({
  el: "#app",
  data: () => ({
    brands: [],
    models: [],
    selectedBrand: null, // store the selected brand in this property
    loading: true,
    errored: false
  }),
  methods: {
    async getBrands () {
      this.loading = true
      this.errored = false
      try {
        const { data } = await axios.get(API_URL)
        console.log("getBrands:", data)
        this.brands = data
      } catch (err) {
        console.error(err)
        this.errored = true
      }
      this.loading = false
    },
    async getModels (brandCode) {
      console.log("Loading brand models for brand code:", brandCode)
      this.models = []
      const { data } = await axios.get(`${API_URL}/${encodeURIComponent(brandCode)}/modelos`)
      this.models = data.modelos
    },
    brandSelected (brand) {
      console.log("brand selected:", JSON.stringify(brand))
      // store the selected brand (in case you need it)
      this.selectedBrand = brand

      // load the brand's models
      this.getModels(brand.codigo)
    }
  }
})