Vue - @click 使用 Axios 在兩個 API 之間發送 id 值

Question

我被困在這個問題上，無法在 Vue.JS 文檔中找到解決方案。
這就是我得到的：
我有一個 API 的汽車型號列表，有“名稱”和“ID”，所以在我點擊“顯示數據”后，我應該發送 id 給第二個 API 電話，並顯示 model 的所有汽車品牌。
我創建了一個警報來查看@click 是否正常工作並收集我需要的 ID。
在我的警報中，我只得到 model 名稱或 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 with modelSelected：

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

我沒有收到我的第二個 api 呼叫與第一個 api 的 id 的 this.brandSelected 一起工作。這是我的 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>

---

我可以在我的警報中看到 model 名稱，使用我的代碼...但是不能使用 this.brandSelected 發送到第二個 api？ 我在哪里做錯了？ 找不到！

---

在這里可以查看來自api的數據：品牌：

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

帶有品牌代碼的型號：

 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中的字符串，但它似乎僅被定義為一種方法。

當你點擊一個品牌時，你似乎想做兩件事......

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