How can I access global variables inside a vueJS component?
I’m trying to access the url variable in the fetch function inside methods but it won’t work.
var produits = [];
var url = '/dataset.json';
const vm = new Vue({
el: "#app",
data: {
produits: []
},
methods: {
handleKeyUp(event) {
console.log(event.key);
this.displayProducts()
},
displayProducts(produits) {
const htmlString = produits
.slice(0, 3)
.map((produit) => {
var replace = searchBar.value;
var re = new RegExp(replace, "gi");
return `
<li class="produitWrapper">
<div class="imgProduit">
<img src="https://d1tydw6090df56.cloudfront.net/products/320x240/${produit.imageKeyHashes}.jpg" alt="">
</div>
<div class="infosProduit">
<h2>${produit.title} - </h2>
<h3>${produit.mpn.replace(re, `<span class="highlight">$&</span>`)}</h3>
<br>
<p>${produit.description}</p>
</div>
</li>
`;
})
.join("");
productsList.innerHTML = htmlString;
},
fetch(url).then(res => res.json())
.then((output) => {
produits = output
})
.catch(err => { throw err });
}
})