Help Needed
Can anyone advise on the best way to pass a value retrieved from a JSON file in a vuejs project into a link, specifically a search link?
While I am aware of various methods using other libraries or plain javascript, I'm curious if there is a recommended approach for vuejs, otherwise using plain ES6 would suffice.
Situation Overview
In my scenario, when a recipe is not found in the host database, I display a link to "find similar recipes". Since I always have a name but not a recipe, I want to dynamically generate the link text like "click link for recipes similar to Braised Duck taco".
Currently, the hardcoded url is:
https://duckduckgo.com/?q=braised+duck&t=h_&ia=recipes
However, for my link, I need to take the name of the taco and integrate it into the query.
Code Snippet - Babel
function otherTaco (str) {
const recipeQuery
return {}
}
Data Field - Sample Value
"name":"Pepper Tempeh"
HTML Implementation
<a href="https://duckduckgo.com/?q=taco&t=h_&ia=web" target="_blank"> {{ taco.name }}</a>
The placeholder "taco" should be replaced with the actual value of taco.name in the link ?q=taco&t=h_&ia=web".
To see a demonstration in action, visit this CodePen link.