初心者です。
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/10 10:54
2020/03/10 11:23 編集
2020/03/11 01:25
2021/06/25 20:55