Json Structure

{
  "id": 1,
  "what": "He is designer using php & vuejs",
  "who": "Muhaza",
  "cars": [
    {
      "name": "Ford",
      "models": [
        "Fiesta",
        "Focus",
        "Mustang"
      ]
    },
    {
      "name": "BMW",
      "models": [
        "320",
        "X3",
        "X5"
      ]
    },
    {
      "name": "Fiat",
      "models": [
        "500",
        "Panda"
      ]
    }
  ]
}

Axios + Jsonbin.io database

Axios parse json array using v-for

Axios : Parse external 3rd party json

Parse local json data

VUE 3.0 : Parsing External Json

...

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->

 

    <div><Header menu="menu"/> |<Header menu="masakan"/> |<Header menu="thai"/></div>
    <!-- <p>{{tasks.title}}</p> -->
 
    <HelloWorld content="Welcome to Your Vue.js App" />
    <HelloMuhaza  content="Muhaza On Work"/>
    <myComponent content="This part of component"/>

    <!-- parsing from external api -->
    <ul v-if="posts && posts.length">
      <li v-for="post of posts" v-bind:key="post.id">
        <p><strong>{{post.title}}</strong></p>
        <p>{{post.body}}</p>
      </li>
    </ul>
  </div>
</template>

<script>

import HelloWorld from "./components/HelloWorld.vue";



export default {
  name: "app",
  //axios start here
  data () {
    return {
      posts: []
    }
  },
  created() {
    axios.get('http://jsonplaceholder.typicode.com/posts').then((response) => {
      this.posts = response.data
    })
    .catch((e) => {
      console.error(e)
    })
  },

  components: {
    HelloWorld,
  }
};



</script>

<style>
</style>

Fetch/parse API/json using axios in vuejs

Async API JSON