Display JSON file content in Vue

Question

I've json file with some data. I've to fetch this data and display them in the component.

In my vuex store in actions I have:

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 state:

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

And now how to get this todos in state and display them when Homepage is mounted?

JSON file example:

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

Amaarockz · Accepted Answer · 2021-10-01 18:31:02Z

3

Well you can use mapState in your components

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

edited Oct 1, 2021 at 18:31

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

answered Oct 1, 2021 at 14:46

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikola Pavicevic · Accepted Answer · 2021-10-01 14:58:19Z

1

You can make getter for todos:

getAllTodos: (state) => state.todos

Then map getters in template :

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

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

answered Oct 1, 2021 at 14:58

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Collectives™ on Stack Overflow

Display JSON file content in Vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related