What is the correct way to pass dynamic parameter to the api call in Vuejs?

Question

HelloWorld.vue

 <template> <div> <div v-for="box in boxes":key="box.SouName"> {{ box.SouName }} </div> <div v-for="paint in paints":key="paint.Tame"> {{ paint.Tame }} </div> </div> </template> <script> import { test1 } from "./test1"; import { test2 } from "./test2"; export default { name: "HelloWorld", components: {}, data() { return { boxes: [], paints: [], }; }, mounted() { test1().then((r) => { this.boxes = r.data; }); test2().then((r) => { this.paints = r.data; }); }, }; </script>

test1.js

 import axios from "axios"; export const test1 = () => axios.get("http://35.162.202.237:3000/...name");

test2.js

 import axios from "axios"; export const test2 = async (SouName = "aaaa") => await axios.get( "http://35.162.202.237:3000/pi?name=" + SouName );

If you see, in test2.js, i have SouName = "a" aathis means, i am checking the database name in a static way. In the output also, it is showing as array[0] only, not an entire array which has SouName

Note:- I have an API call to get SouName as a response and then i want to pass this SouName to an API call to get SouName as a response.

And then i want to pass this SouName dynamically in test2.js.

As you can see, according to the output, in the paints, i have only one array, that is Array[1] not all like boxes array.???

Because of that reason, i want to changes to dynamic way, to pick the SouName directly from the api..

Can you please suggest code change, if there is any wrong Thanks

Answer 1

As per your question, what I understood is that you are making an API call to get SourcName as a response and then you want to pass this SourcName dynamically in tabsandcontent method? If my understanding is correct, You can follow below steps :

1. In mounted() life cycle hook, First call the API to get the SourcName .
2. On success promise, call tabsandcontent() method and pass the SourcName .

For Ex:

mounted() {
  getSourcName().then((sourcName) => { // This API method is to get the sourcName value
    tabsandcontent(sourcName).then((r) => { // This API method is to pass the dynamic SourcName and get the response to bind in frontend.
      this.names = r.data
    }
  }
}

Edit as per the author actual code :

mounted() {
  test1().then((r) => {
    this.boxes = r.data;
    this.boxes.forEach((obj) => {
      test2(obj.SourceDatabaseName).then((r) => {
        r.data.forEach((item) => {
          this.paints.push(item);
        });
      });
    });
  });
}