【Vue3】HTML，チェックボックス、セレクトボックス

【Checkbox】
resources/js/ComponentsにCheckbox.vueのコンポーネント作成し、

import Checkbox from '@/Components/Checkbox.vue';

した上で使える。

Q：form編集時、DBの値を元にチェックボックスに最初からチェックが入っている状態にしたい時

A： :checked を使う

Q：チェックボックスに✓を入れて送信すると「true」が送られるがそれを「１」に変えたい時

A：true-value="1"　false-value="0"を使う。(1,0は数値型で渡される)
※ちなみに文字列型の1,0を渡したい場合は  :true-value="'1'"  :false-value="'0'" になる。

<div>

<InputLabel for="notification_format" value="通知希望形式" />

<Checkbox

id="notification_format"

name="notification_format"

v-model:checked="form.notification_format" // :checkedをつけるとチェックが入った状態になる

:true-value="1"　　// DBに数値型の1,0で登録したい時

:false-value="0"

/>

</div>

【Selectbox】
resources/js/ComponentsにSelectbox.vueのコンポーネント作成し、

import SelectBoxInput from '@/Components/SelectBoxInput.vue';

した上で使える。

Q：keyとvalueの設定について

A：２つの方法がある。
①config/params.php内に記述→コントローラーでinertiaを使ってvueに知らせる
②script内にconstで定義する

①の場合
params.php

<?php

return [

//適用除外の事由

"reason_exception" => [

"海外在住"=>"海外在住",

"短期在留"=>"短期留学",

"その他"=>"その他",

]
];

コントローラー

return Inertia::render('SocialInsurance/Edit', [

'reason_exception' => config('params.reason_exception'),

]);

vue

<script setup>
const props = defineProps({

reason_expention: {　　　// 受け取る (その前にEdit.vueでも受け取る作業をしているが省略)

type: Object,

},
</script>

<SelectBoxInput

id="reason_exception"

type="text"

name="reason_exception"

class="mt-1 block w-full"

v-model="form.reason_exception"

:options="reason_exception" // :optionsで書く

autocomplete="reason_exception"

@update:modelValue="updateValue"　　// これがないとoptionsのデータが変更された時にuiに反映されない

/>

②の場合

<script setup>
const is_options = {0:'無' , 1:'有'} // この場合、文字列の0or1が送信される

</script>

<SelectBoxInput

id="other"

type="text"

name="other"

class="mt-1 block w-full"

v-model="form.other"

:options="is_options"　　// script内で定義したもの。

autcomplete="other"

/>