stocking api response.data in localStorage on click vuejs-CodePudding

My goal is to store a specific data in the localStorage when I click on a link

but log i get is either undefined or absolutely nothing.

<li v-for="(categorie, index) in categories" :key="index">   
                <a href="./currentCategory" @click.prevent="getCategory()"> 
                       
              <img  :src="categorie.strCategoryThumb" >    
              <p>{{ categorie.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 can't be reached");
        })
    },
    getCategory() {
        localStorage.setItem('currentCategory', this.categorie.strCategory );
    }
  },

I am using this API https://www.themealdb.com/api/json/v1/1/categories.php

I guess this.categorie.strCategory is incorrect but i really cant figure it out

I also tried this.categories.strCategory

CodePudding user response：

Try to pass category

@click.prevent="getCategory(categorie)

then save it

getCategory(cat) {
    localStorage.setItem('currentCategory', cat );
}

CodePudding user response：

Found the answer thanks to @Nikola Pavicevic

had to pass a category to the click event

@click.prevent="getCategory(categorie.strCategory)

and pass it to the function

getCategory(cat) {
        localStorage.setItem('currentCategory', cat);
    }