REST API Call to Get Location Details in Vue.js

{
  "name": "RestAPIInvocation",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap-vue": "^2.0.0-rc.11",
    "vue": "^2.5.16",
    "vue-router": "^3.0.1",
    "gh-pages": "^1.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-rc.10",
    "@vue/cli-plugin-eslint": "^3.0.0-rc.10",
    "@vue/cli-plugin-unit-mocha": "^3.0.0-rc.10",
    "@vue/cli-service": "^3.0.0-rc.10",
    "@vue/test-utils": "^1.0.0-beta.20",
    "chai": "^4.1.2",
    "vue-template-compiler": "^2.5.16"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": ["plugin:vue/essential", "eslint:recommended"],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
}

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.config.productionTip = false;
Vue.use(BootstrapVue);

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  #nav {
    padding: 30px;
  }

  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  #nav a.router-link-exact-active {
    color: #42b983;
  }

  .centeralign {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
</style>

import Vue from "vue";
import Router from "vue-router";
import detailsByZipCode from "./views/detailsByZipCode.vue";
import getExchangeRates from "./views/getExchangeRates.vue";
Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: "/",
      redirect: "/detailsByZipCode",
    },
    {
      path: "/detailsByZipCode",
      name: "detailsByZipCode",
      component: detailsByZipCode,
    },
    {
      path: "/getExchangeRates",
      name: "getExchangeRates",
      component: getExchangeRates,
    },
  ],
});
export default router;

<template>
    <div class="home">
        <div class="vue-logo-back">
            <img src="../assets/logo.png"
                 width="100px" 
                 height="100px" />
        </div>
        <div class="col-md-6 centeralign">
            <p>
                This Page Displays Country details 
                by Zip Code. Example : 600 028
            </p>
            <input type="text" 
                   v-model="input.zipcode" 
                   placeholder="Zip Code" />
            <button v-on:click="getLocationDetails()">
                Get Location Details
            </button>
            <div class="card-body">
                <h5 class="card-title">
                    {{countrydetails["post code"]}}
                </h5>
                <p class="card-text">
                    Zip Code : {{countrydetails["post code"]}}
                </p>

                <p class="card-text">
                    Country : {{countrydetails.country}}
                </p>

                <p class="card-text">
                    Country Short Form : {{countrydetails["country abbreviation"]}}
                </p>

                <ul>
                    <li v-for="place in countrydetails.places" :key="place.longitude">
                        <p class="card-text">
                            Place Name : {{place["place name"]}}
                        </p>

                        <p class="card-text">
                            Longitude : {{place["longitude"]}}
                        </p>

                        <p class="card-text">
                            Latitude : {{place["latitude"]}}
                        </p>

                        <p class="card-text">
                            State : {{place["state"]}}
                        </p>

                        <p class="card-text">
                            State Short Form : {{place["state abbreviation"]}}
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'countrydetails',
    // Fetch the call for default Zip code 
    mounted(){
        axios.get(`https://api.zippopotam.us/in/600028`)
        .then(response => { 
            this.zipcode = response.data.origin;
            this.countrydetails = response.data;
        }).catch(error => { 
        })

    },
    data() {
        return {
            input: {
                zipcode: ""
            },            
            countrydetails: {}
        }
    },

    methods: {
        // According to the given zipcode, the fetch is happening
        getLocationDetails() {
            axios.get(`https://api.zippopotam.us/in/`+this.input.zipcode)
            .then(function(response)  { 
                this.countrydetails = response.data;
            }.bind(this)).catch(error => { 
            })            
        }
    }
}
</script>
<style scoped>
  .addmargin {
      margin-top: 10px;
      margin-bottom: 10px;
  }

  .vue-logo-back {
      background-color: black;
  }
</style>