Display LocalStorage value-CodePudding

I want to display LocalStorage value in my html using vueJS but I am unable to get the value.

I am getting this error Uncaught (in promise) ReferenceError: currentCategory is not defined

<h3 >Recettes de {{ this.currentCategory }}</h3>

var categoryStorage = JSON.parse(localStorage.getItem("currentCategory"));
data() {
    return {
      meals: [],
      categories: [],
      currentCategory: currentCategory
    }
  },

CodePudding user response：

Try this:

<h3 >Recettes de {{ currentCategory }}</h3>

export default {
    data() {
        return {
            meals: [],
            categories: [],
            currentCategory: null,
        };
    },

    // mounted
    mounted() {
        this.currentCategory = JSON.parse(localStorage.getItem('currentCategory'));
    },
};

CodePudding user response：

You should assign categoryStorage into a currentCategory.

Live Demo :

var categoryStorage = 'A'; // You can get the value from local storage here

new Vue({
  el: '#app',
  data() {
    return {
      meals: [],
      categories: [],
      currentCategory: categoryStorage
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h3 >Recettes de {{ currentCategory }}</h3>
</div>