how to pass a varible in api link url in vue js-CodePudding

In the below API i wanted to replace chicken with my ingredient variable value.

var ingridient = ref("chicken");

https://api.edamam.com/api/recipes/v2?type=public&q=chicken&app_id=MY_API_ID&app_key=MY_API_KEY

CodePudding user response：

As i was using composition API of Vue JS for that reason only ${ingridient} was not working for me. In composition API any variable with reactive ref provides an object. so for retrieving my ingridient value i need to call the value by ${ingridient.value}.

var ingridient = ref("chicken");

https://api.edamam.com/api/recipes/v2?type=public&q=${ingridient.value}&app_id=MY_API_ID&app_key=MY_API_KEY

CodePudding user response：

You can use String.prototype.replace()

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String/replace

var url = "https://api.edamam.com/api/recipes/v2?type=public&q=chicken&app_id=MY_API_ID&app_key=MY_API_KEY";

console.log(url);

url = url.replace("chicken","grilledChicken");

console.log(url);

In your case: url = url.replace("chicken", ref("chicken"));