I am currently delving into the world of VueJS. While my code may not be the most elegant, it does the job almost as intended. The issue I am facing is that the API provides the title and href separately in different v-for loops, even though each loop only contains one item (0). My goal is to place the title in the <img> alt tags and also wrap the image in an <a> tag that includes another variable. I am aware that I cannot declare variables within {{ }}. Is there a way for me to create a temporary variable that can be used outside of each v-for? Or, perhaps this approach is flawed?
In my app.js file...
const app = new Vue({
el: '#app',
data: {
results : []
},
methods: {
getItems: function () {
if (this.txtInput && this.mediaType) {
axios.get("https://www.api.org/search?q="+this.txtInput+"&media_type="+this.mediaType)
.then(response => this.results = response.data);
this.mediaType = null;
}
}
}
});
Following that, my HTML looks like this...
<div id="app">
<input id="txtName" v-on:keyup.enter="getItems" v-model="txtInput" type="text"><br>
<input type="radio" id="image" value="image" v-model="mediaType">
<label for="image">Image</label>
<br>
<input type="radio" id="audio" value="audio" v-model="mediaType">
<label for="audio">Audio</label>
<div v-for="result in results">
<div v-for="item in result.items">
<div v-for="data in item.data">
@{{ data.title }}<br>
</div>
<div v-for="link in item.links">
<img v-bind:src="link.href">
</div>
</div>
</div>
</div>