axios を用いたRestAPI取得において、指定したクエリパラメーターの情報を取得したい。

Question

axios を使用したRestAPIの取得時に、クエリパラメーターを指定したいと思い、
サンプルコードを作成しました。
が、指定したクエリパラメーターの値を取得することができず、指定したURLの全ての情報が取得表示されているような状態です。

パラメーターの渡し方が間違っていると思うのですが、調べても良く理解することができません。
どなたか、正しいクエリパラメーターの渡し方をご教示いただけませんでしょうか？

下記サンプルコードと使用したJsonPlaceholderのテスト用APIのURLです。

<template>
  <tbody>
    <tr v-for="item in items" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.title }}</td>
      <td>{{ item.body }}</td>
    </tr>
  </tbody>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import axios from 'axios'

@Component({})
export default class extends Vue {
  items: any = []
  async mounted() {
    const response = await axios.get(
      'https://jsonplaceholder.typicode.com/posts',{params:1}
    )
    this.items = response.data
  }
}
</script>

'https://jsonplaceholder.typicode.com/posts/1'
という形でid:1の情報のみが取得できるようになると[JsonPlaceholderのサイト]に記載が
ありました。
そのように、URLを変更したいと思いサンプルのように{params:1}としました。(https://jsonplaceholder.typicode.com/)

なぜこのようにparamsという形で渡す方法にしたかというと、現在携わっている開発案件において
paramsの値は動的に渡すことがあるからです。
想定しているのは、選択した行のidをparamsとして渡して、その詳細情報を
モーダルで表示させるというな感じです。

ご教示いただけましたら幸いです。

Answer 1

paramsをオブジェクト型で指定すれば期待した動作になると思います。

const response = await axios.get(
  'https://jsonplaceholder.typicode.com/posts',{
    params: {
      id : 1
    }
  }
)

Comments

[takochan1192]

nekoniki様
ご回答いただきまして、ありがとうございます。
問題なく期待した動作を得ることができました。
早急にご回答いただきまして誠にありがとうございます。