Home>
I would like to use Nuxt.js to list the municipalities using the MLIT API.

axios.get ("http://www.land.mlit.go.jp/webland/api/CitySearch?area=" + {params.id})


I thought it would be nice to combine strings as above, but it doesn't work.

<template>
<div>
  <section>
    <div>
      <div>
        <h1>
nuxt v-for
</h1>
        <h2>
nuxt v-for
</h2>
      </div>
    </div>
  </section>
  <div>
    <div>
        {{$route.params.id}}
      <ul>
        <li v-for = "list in lists" v-bind: key = "list.id">
            <div v-for = "data in list" v-bind: key = "data.id">
                {{data.name}}
            </div>
        </li>
      </ul>
    </div>
  </div>
</div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      lists: [],
  }
  },
  created: function () {
    axios.get ("http://www.land.mlit.go.jp/webland/api/CitySearch?area=" + {params.id}). then (function (response) {
      this.lists = response.data
    } .bind (this)). catch (function (e) {
      console.error (e)
    })
  }
}
</script>
{{$route.params.id}}


Will be displayed without problems.