はじめに
バリデーションに引っかかったあと、値を保持し前回入力した値を保持・表示するには
Laravelであれば、oldヘルバ関数を使うが、Vuetifyを用いたラジオボタンでは
バリデーションに引っかかったあとも、チェックがついた状態にすることができず、詰まったので備忘録として書きました。(通常のinputタグであればchecked属性が使えるが、v-radioは使えず詰まった)
内容
sample.balde.php
<script>
const old_animal_name = "<?= old('animal_name') ?>";
</script>
Sample.vue
<v-row>
<v-col>
<span>好きな動物</span>
<v-radio-group
dense
row
v-model="animalName"
>
<v-radio label="ネコ" name="animal_name" value="1"></v-radio>
<v-radio label="イヌ" name="animal_name" value="2"></v-radio>
<v-radio label="その他" name="animal_name" value="3"></v-radio>
</v-radio-group>
</v-col>
</v-row>
<script>
export default {
data: () => ({
animalName: '',
}),
created() {
this.animalName = old_animal_name;
}
}
</script>