【エラー備忘録】[Vue warn]: Invalid prop: type check failed for propのエラー

原因

コンソールに出ているエラー内容は以下の通り。

[Vue warn]: Invalid prop: type check failed for prop "taskId". 
Expected String with value "1", got Number with value 1.

原因

APIから取得したtaskIdはNumber型.
それに対してTaskShowComponentのpropsのtaskIdはString型。
データ型が一致していない。

関連するコードは以下の部分。

TaskListComponent.vue

<router-link v-bind:to="{name: 'task.show', params: {taskId: task.id}}">

<script>
export default {
  methods: {
    getTasks(){
      axios.get('/api/tasks')
        .then((res) => {
          this.tasks = res.data;
        });
    },
</script>

app.js

{
   path: '/tasks/:taskId',
   name: 'task.show',
   component: TaskShowComponent,
   props: true
},

TaskListComponentのrouter-linkのparamsをString型に変換してみる。

TaskListComponent.vue

 <router-link v-bind:to="{name: 'task.show', params: {taskId: task.id.toString()}}">

これでエラーが解消した。