Currently experimenting with Vue.js and integrating a 3rd party API. Successfully fetched the JSON data and displayed it on my html, but encountering issues with missing images. As some images are absent from the JSON file, I've saved them locally on my laptop.
Attempted to set empty image sources using v-if in my html without success (refer to the comments in my html file).
Additionally, tried assigning a class for each img element and then setting the src attribute using jQuery $("#zTTWa2").attr("src", "missing_beers-logo/11.5%20plato.png"); also without any luck.
Where am I going wrong? It's possible that my approach is flawed due to my limited coding experience, so any suggestions would be greatly appreciated. Thank you in advance.
var app = new Vue({
el: "#app",
data: {
beers: [],
decrArray: [], //array with img links
cleanedArray: [], //without undefined
path: 0,
images: [missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png",
"missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png",
"missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png"],
created: function() {
this.getData();
},
methods: {
getData: function() {
var fetchConfig =
fetch("http://api.brewerydb.com/v2/beers?key=6a3ac324d48edac474417bab5926b70b&format=json", {
method: "GET",
dataType: 'jsonp',
// responseType:'application/json',
// "Content-Type": 'application/json',
headers: new Headers({
"X-API-Key": '6a3ac324d48edac474417bab5926b70b',
'Content-Type': 'application/json',
"Access-Control-Allow-Credentials": true,
"Access-Control-Allow-Origin": '*',
"Access-Control-Allow-Methods": 'GET',
"Access-Control-Allow-Headers": 'application/json',
})
}).then(function(response) {
if (response.ok) {
return response.json();
}
}).then(function(json) {
console.log("My json", json)
// console.log("hi");
app.beers = json.data;
console.log(app.beers);
app.pushDescr();
console.log(app.decrArray);
app.removeUndef();
//console.log(app.cleanedArray);
})
.catch(function(error) {
console.log(error);
})
},
pushDescr: function() {
console.log("hi");
for (var i = 0; i < app.beers.length; i++) {
app.decrArray.push(app.beers[i].labels);
}
return app.decrArray;
},
removeUndef: function() {
for (var i = 0; i < app.decrArray.length; i++) {
if (app.decrArray[i] === undefined) {
app.decrArray[i] = "";
}
}
console.log(app.decrArray);
},
getMissingImg(index){
return(this.images[index]);
},
}
}) <div class="app">
<div v-for="(value, index) in beers">
{{value.name}}
<!--
<img v-bind:src="decrArray[index].medium" :class="value.id"/>
-->
<div v-if="decrArray[index].medium !==undefined ">
<img :src="decrArray[index].medium" />
</div>
<div v-else>
<img :src="getMissingImg(index)" />
</div>
</div>
</div>