Show the contents of a JSON file using Vue

Question

Show the contents of a JSON file using Vue

I have a JSON file containing some data that needs to be fetched and displayed in a component.

In the actions of my Vuex store, I've implemented:

async getTodos (context) {
  const todos = []

  const response = await fetch('../../data/todos.json')
  const responseData = await response.json()

  todos.push(responseData)

  context.commit('getTodos', todos)
}

Mutations:

getTodos (state, payload) {
  state.todos = payload
}

And the state looks like this:

state () {
  return {
    todos: []
  }
}

Now, how can I access these todos from the state and display them when the Homepage is mounted?

An example of the JSON file content:

[
  {
    "id": "1",
    "title": "1st todo",
    "description": "First task",
    "dueTo": "2021-10-03"
  },
  {
    "id": "2",
    "title": "2nd todo",
    "description": "Second task",
    "dueTo": "2021-10-02"
  }
]

javascript json vue.js vuejs2 vuex

Answer 1

Answer №1

If you want to access state in your components, you can utilize mapState method.

<template>
   <div>
      <div>{{todos}}</div>
   </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
   computed: {
      ...mapState(["todos"])
   }
}
</script>

Answer 2

If you want to access state in your components, you can utilize mapState method.

<template>
   <div>
      <div>{{todos}}</div>
   </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
   computed: {
      ...mapState(["todos"])
   }
}
</script>

Answer 3

Answer №2

If you want to retrieve all todos, you can create a getter function like this:

getAllTodos: (state) => state.todos

After that, you need to map the getters in the template :

import { mapGetters } from 'vuex';
computed: {
  ...mapGetters([ 'getAllTodos' ]),
},

<template>
  <ul>
    <li v-for="(todo, i) in getAllTodos" :key="i">{{todo}}</li>
  </div>
</template>

Answer 4

If you want to retrieve all todos, you can create a getter function like this:

getAllTodos: (state) => state.todos

After that, you need to map the getters in the template :

import { mapGetters } from 'vuex';
computed: {
  ...mapGetters([ 'getAllTodos' ]),
},

<template>
  <ul>
    <li v-for="(todo, i) in getAllTodos" :key="i">{{todo}}</li>
  </div>
</template>

Show the contents of a JSON file using Vue

Answer №1

Answer №2

Similar questions

Discover how to capture a clicked word within the Ionic Framework

Load texture using ImageUtils with callback in Canvas Renderer

Ways to prevent mouse selection in an input field without disabling or making it read-only

Encountering the error message "require is not defined" in the browser while utilizing gulp-browserify for my React.js modules

Ways to make nodejs return a different value instead of an object promise

What is the process for linking my Next.js application with MongoDB Compass?

Adjust the size of the iframe image to fit seamlessly within the design

Selenium's WebDriver getAttribute function can return an object of type "object",

Looking for a way to extract Regular Expressions from an IgGrid cell in Infragistics?

C# web service is unable to return a specific value

Having trouble importing the d3-geo package into a Node.js TypeScript project

Tips for avoiding backslashes when creating a JSON file using PySpark

Forward to a task with a unique identifier obtained through asynchronous JavaScript calls

Dynamically parallelizing functions with async and arrays

The process of integrating Tailwind elements into NextJs version 13

Executing a sequence of jQuery's $.when().then() functions

Using Angular $resource to store an object with arrays

Webpack is failing to recognize certain CSS files

Optimizing with react and mobX: What You Need to Know

Error: Definitions missing during conversion from JSON to XML