How do I access global variables within a VueJS component?
I'm attempting to retrieve the `url` variable in the fetch function within the `methods` section, but it seems to be causing issues.
var products = [];
var url = '/data-set.json';
const app = new Vue({
el: "#app",
data: {
products: []
},
methods: {
handleKeyPress(event) {
console.log(event.key);
this.showProducts()
},
showProducts(products) {
const htmlSnippet = products
.slice(0, 3)
.map((product) => {
var replaceTerm = searchElement.value;
var regExp = new RegExp(replaceTerm, "gi");
return `
<li class="productWrapper">
<div class="imgProduct">
<img src="https://someurl.com/products/320x240/${product.imageKey}.jpg" alt="">
</div>
<div class="infoProduct">
<h2>${product.title} - </h2>
<h3>${product.id.replace(regExp, `<span class="highlight">$&</span>`)}</h3>
<br>
<p>${product.description}</p>
</div>
</li>
`;
})
.join("");
productListContainer.innerHTML = htmlSnippet;
},
fetch(url).then(res => res.json())
.then((result) => {
products = result
})
.catch(error => { throw error });
}
})