質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

13095閲覧

[Vue warn]: Invalid prop: type check failed for propのエラーが出てしまう

tenlife

総合スコア70

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

2グッド

0クリップ

投稿2020/03/10 09:43

初心者です。

LaravelとVue.jsを触っています。

タスクidを使おうとするとvue warnが出てきます。

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

調べてみると、書き方の問題っぽいように見えます。
https://github.com/bootstrap-vue/bootstrap-vue/issues/2582
https://gitter.im/vuejs/vue/archives/2017/03/10

TaskShowComponent

1<template> 2 <div class="container"> 3 <div class="row justify-content-center"> 4 <div class="col-sm-6"> 5 <form> 6 <div class="form-group row border-bottom"> 7 <label for="id" class="col-sm-3 col-form-label">ID</label> 8 <input type="text" class="col-sm-9 form-control-plaintext" readonly id="id" 9 v-model="task.id"> 10 </div> 11 <div class="form-group row border-bottom"> 12 <label for="title" class="col-sm-3 col-form-label">Title</label> 13 <input type="text" class="col-sm-9 form-control-plaintext" readonly id="title" 14 v-model="task.title"> 15 </div> 16 <div class="form-group row border-bottom"> 17 <label for="content" class="col-sm-3 col-form-label">Content</label> 18 <input type="text" class="col-sm-9 form-control-plaintext" readonly id="content" 19 v-model="task.content"> 20 </div> 21 <div class="form-group row border-bottom"> 22 <label for="person-in-charge" class="col-sm-3 col-form-label">Person In Charge</label> 23 <input type="text" class="col-sm-9 form-control-plaintext" readonly id="person-in-charge" 24 v-model="task.person_in_charge"> 25 </div> 26 </form> 27 </div> 28 </div> 29 </div> 30</template> 31 32<script> 33export default { 34 props: { 35 taskId: { 36 type: String 37 } 38 }, 39 data: function() { 40 return{ 41 task: {} 42 } 43 }, 44 methods: { 45 getTask(){ 46 axios.get('/api/tasks/' + this.taskId) 47 .then((res) => { 48 this.task = res.data; 49 }); 50 } 51 }, 52 mounted() { 53 this.getTask(); 54 }, 55} 56</script>

app

1{ 2 path: '/tasks/:taskId', 3 name: 'task.show', 4 component: TaskShowComponent, 5 props: true 6 },

TaskListComponent

1<tr v-for="task in tasks"> 2 <th scope="row">{{task.id}}</th> 3 <td>{{task.title}}</td> 4 <td>{{task.content}}</td> 5 <td>{{task.person_in_charge}}</td> 6 <td> 7 <router-link v-bind:to="{name: 'task.show', params: {taskId: task.id}}"> 8 <button class="btn btn-primary">Show</button> 9 </router-link> 10 </td> 11 <td> 12 <router-link v-bind:to="{name:'task.edit', params: {taskId: task.id}}"> 13 <button class="btn btn-success">Edit</button> 14 </router-link> 15 </td> 16 <td> 17 <button class="btn btn-danger" v-on:click.prevent="deleteTask(task.id)">Delete</button> 18 </td> 19 </tr> 20<script> 21export default { 22 data: function() { 23 return { 24 tasks: [] 25 } 26 }, 27 methods: { 28 getTasks(){ 29 axios.get('/api/tasks') 30 .then((res) => { 31 this.tasks = res.data; 32 }); 33 }, 34 deleteTask(id){ 35 axios.delete('/api/tasks/' + id) 36 .then((res) => { 37 this.getTasks(); 38 }) 39 } 40 }, 41 mounted() { 42 this.getTasks(); 43 } 44} 45</script>

試した事
検索したことを元にやってみましたが解決できませんでした。

例 props: { taskId: { type: String } }, ⬇️ props: { taskId: String },

どなたか知恵を貸していただきたいです。

よろしくお願いします。

Vue.js 2.6.11
Laravel 6.0
php 7.4.2

challengeman, popobot👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

APIから取得したtaskIdNumber型なのに、TaskShowComponentpropstaskIdString型になっているからWarningが出ています。

TaskListComponentrouter-linkparamsString型に変換してあげれば直ると思います

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

余談ですが、RouterのparamsはURLから取得した場合にStringになるのでStringにしておくのがいいと思います。

投稿2020/03/10 10:13

編集2020/03/10 10:28
popobot

総合スコア6586

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tenlife

2020/03/10 10:54

エラーが治りました。丁寧にありがとうございます。 "APIから取得したtaskIdがNumber型"とはどこを見て判断したのか教えていただけますでしょうか?
popobot

2020/03/10 11:23 編集

エラーメッセージとコードから判断しました。 > type check failed for prop "taskId". Expected String with value "1", got Number with value 1. これは「propのtaskIdに対する型チェックに失敗した。 "1"のような文字列を期待したけど、1という数字だった」という内容です taskIdの元データは、コードを辿っていくとAPIの結果だったので、APIから取得したtaskIdがNumberだと推測しました
tenlife

2020/03/11 01:25

丁寧にありがとうございます。助かりました。 ありがとうございました。
challengeman

2021/06/25 20:55

大変助かりました。私も勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問