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

Question

I'm stuck at this problem and can't find solution on Vue.JS docs.
This is what I'm getting:
I have a list with cars models from a API, that have "name" and "id", so I after I click on "Show Data" I should send id for a second API call and show all car brands for that model.
I've created a alert to see if @click works fine and collect the ID that I need.
On my alert, I'm getting only the model name or id, and I can't send this to my second api url.
This is my data where I get array items:

  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();
  }, 

methods with API calls:

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

and my @click with modelSelected:

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

I'm not getting my second api call working with this.brandSelected with id from first api. This is my HTML where I have a call for first api and @click button:

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

---

I can see the model name inside my alert, using my code... But can't send to second api using this.brandSelected? Where I'm doing this wrong? Can't find it!

---

Here you can check data from api: brand:

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

models with brand code:

 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

You seem to be treating this.brandSelected like a string in your URL but it only appears to be defined as a method.

It seems you want to do two things when you click a brand ...

1. Store the selected brand somewhere, and
2. Load the brand's models

Try something like this and make sure to check your browser console for the log messages and any errors...

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