Learning to access JSON data stored in local storage and presenting it in a VUE component

Question

Learning to access JSON data stored in local storage and presenting it in a VUE component

I'm having trouble displaying the content of a json file (books.json) as a list on my website using VUE. Here is the code I'm currently working with:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4234372702706c776c7375">[email protected]</a>/dist/vue.js"></script>

</head>
<body>
  <div id="app">
    <span>{{items}}</span>
    <ul>
      <li v-repeat="items">
         <span class="name">{{books.name}}</span><br>
         <span class="genre">{{books.genre}}</span>
      </li>
    </ul>
  </div>
</body>
 

<script>

    var app= new Vue({
        data: {
          items: null
        },

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

        methods: {
          fetchData: function () {
          var self = this;
          $.get( 'books.json', function( data ) {
              self.items = data;
          });
          }
        }
    });
</script>
 
</html>

Could someone assist me with this issue, please? Thank you

javascript json vue.js

Answer 1

Answer №1

It is recommended to update your vue version. I have made the necessary changes by replacing v-repeat with v-for and mounting it to #app. You can also utilize el within your vue instance instead of $mount. Furthermore, I've updated the data to be a function as per the guidelines (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>

Answer 2

It is recommended to update your vue version. I have made the necessary changes by replacing v-repeat with v-for and mounting it to #app. You can also utilize el within your vue instance instead of $mount. Furthermore, I've updated the data to be a function as per the guidelines (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>

Learning to access JSON data stored in local storage and presenting it in a VUE component

Answer №1

Similar questions

The JavaScript in the Laravel file isn't functioning properly, but it works perfectly when incorporated via CDN

Is it possible to retrieve data using a POST request?

Server.js node is unresponsive and throwing an error message

A pair of distinct identifiers in an SQL database

Encountering an error with jQuery being undefined while utilizing an Immediately Inv

Enabling CORS for certain routes while disabling it for others using Vue

Encountering issues while trying to install Java using NPM

Accessing the setter's name from within a Javascript setter function

Encountering an error message while starting up a Node Express server

Menu options disappearing upon clicking within the container area

What is the best method to determine offsetTop in relation to the parent element instead of the top of

In relation to the issue with JSON parsing

Combine two data types into one using Serde

How can I identify duplicate values within two distinct javascript objects?

Incorporate an Ajax request onto an existing link within a div element

Extract string from deeply nested JSON data

The Express router is failing to recognize the mongoose model

Despite the presence of data, MongoDB is not returning any values

utilization of jq json for dynamic http requests

decoding JSON object into a table