Laravel+Inertia.js+Vue3の環境で開発を行っていると、Webブラウザの開発ツールのコンソールに、“ストリング型を期待しているのに、数値になっている”という意味のワーニングが表示されました。
[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected String with value "1", got Number with value 1. at <TextInputmodelValue=1onUpdate:modelValue=fnerror=undefined ...>
Vue3側のコンポーネントは次のとおりです。
import { Head, Link } from '@inertiajs/vue3'
import Icon from '@/Shared/Icon.vue'
import Layout from '@/Shared/Layout.vue'
import TextInput from '@/Shared/TextInput.vue'
import SelectInput from '@/Shared/SelectInput.vue'
import LoadingButton from '@/Shared/LoadingButton.vue'
import TrashedMessage from '@/Shared/TrashedMessage.vue'
export default {
components: {
Head,
Icon,
Link,
LoadingButton,
SelectInput,
TextInput,
TrashedMessage,
},
layout: Layout,
props: {
item_categories: Object,
item: Object,
},
remember: 'form',
data() {
return {
form: this.$inertia.form({
name: this.item.name,
item_category_id: this.item.item_category_id,
purchase_price: this.item.purchase_price,
consumption_tax: this.item.consumption_tax,
brand: this.item.brand,
}),
}
},
:
原因と対処方法
Laravel側でInertia::renderを使ってVue3のコンポーネントにpropsを渡すとき、数値をそのまま設定するとワーニングが表示されるようです。strvalで数値を文字列に変換するとワーニングが消えました。
public function edit(Item $item)
{
return Inertia::render('Item/Edit', [
'item' => [
'id' => $item->id,
'purchase_price' => strval($item->purchase_price),
'consumption_tax' => strval($item->consumption_tax),
],
:
ワーニングが表示されていたItemのテーブル定義は次のとおりです。
purchase_priceとconsumption_taxはdouble型です。
{
public function up(): void
{
Schema::create('items', function (Blueprint $table) {
$table->id();
$table->string("name");
$table->foreignId('item_category_id')->constrained('item_categories');
$table->double('purchase_price');
$table->double('consumption_tax');
$table->string("brand");
$table->timestamps();
});
}
:
