Create On Off/ Switch / Toggle

<template>
  <div>
    <img
      v-if="isOn"
      height="80"
      src="https://image.flaticon.com/icons/png/128/351/351667.png"
    />
    <img
      v-else
      height="80"
      src="https://image.flaticon.com/icons/png/256/515/515077.png"
    />
  </div>
</template>
<script>
export default {
  props: {
    isOn: Boolean
  }
};
</script>





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

Vue Starter

#global install
npm install -g @vue/cli

#check version
vue --version

#create app
npm create NameOfApp

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

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>

Form: Get Value from selected data

Fetch/parse API/json using axios in vuejs