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>