My objective is to save specific data in the browser's localStorage upon clicking a link.
However, the output I receive is either undefined or completely empty.
<li v-for="(category, index) in categories" :key="index">
<a href="./currentCategory" @click.prevent="getCategory()">
<img class="category-img" :src="category.strCategoryThumb">
<p>{{ category.strCategory }}</p>
</a>
</li>
data() {
return {
categories: []
}
},
methods: {
getAllCategories() {
axios
.get('https://www.themealdb.com/api/json/v1/1/categories.php')
.then((response) => {
console.log(response.data);
this.categories = response.data.categories;
}).catch(error => {
console.log(error);
alert("API cannot be reached");
})
},
getCategory() {
localStorage.setItem('currentCategory', this.category.strCategory );
}
},
I am utilizing the following API:
I suspect that this.category.strCategory might be incorrect but I'm struggling to determine the correct approach.
I have also attempted using this.categories.strCategory