[Vuejs]-How to read json from local storage and display data in VUE

by

0👍

✅

Please update your vue version. I’ve replaced v-repeat with v-for and mounted it to #app. You can also use el inside your vue instance instead of $mount. Additionally I’ve changed data to a function. (https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function)

const app = new Vue({
  data() {
    return {
      items: null
    }
  },

  created: function () {
    this.fetchData();
  },

  methods: {
    fetchData: function () {
      var self = this;
      
      // test data
      this.items = [{
        name: 'Test-Name',
        genre: 'My Genre'
      }];
      
      // Commented out because we don't have this file.
      /* $.get( 'books.json', ( data ) => {
        self.items = data;
      }); */
    }
  }
});

app.$mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <span>{{items}}</span>
  <ul>
    <li v-for="book in items" :key="book.name">
      <span class="name">{{book.name}}</span><br>
      <span class="genre">{{book.genre}}</span>
    </li>
  </ul>
</div>

Leave a comment