文字列の結合ができない

Question

いつもお世話になります。
Nuxt.jsを使って国交省のAPIを用いて市町村を一覧表示したいと考えています。

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

上記のように文字列を結合すればいいと考えましたがうまくいきません。

http://www.land.mlit.go.jp/webland/api.html

<template>
<div>
  <section class="hero is-primary is-bold">
    <div class="hero-body">
      <div class="container">
        <h1 class="title">
nuxt v-for
</h1>
        <h2 class="subtitle">
nuxt v-for
</h2>
      </div>
    </div>
  </section>
  <div class="container is-fluid">
    <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}}

は問題なく表示されます。
よろしくお願いいたします。

Answer 1

$route.params.id が入ってきているという前提で、下記でいかがでしょうか。

"http://www.land.mlit.go.jp/webland/api/CitySearch?area=" + this.$route.params.id

Comments

[1042limit]

出来ました。ありがとうございます！