Die Situation

Für eine Web-App unter anderem zur Erfassung von Fragebögen setze ich in einem Kundenprojekt auf Vue.js und Vuetify in Verbindung mit vee-validate.

Im Fragebogen gibt es mehrere Fragen, die dieselbe Struktur nutzen. Sinnvollerweise kommt dann eine Komponente zum Einsatz, die einfach mit Copy-Paste wiederverwendet werden kann:

<Question>Wie leicht/schwer war es normalerweise für Sie, eine Vertretung für einen Abend zu finden?</Question>
<EasynessRadio v-model="vertretung_kurz.value.value" :error-messages="vertretung_kurz.errorMessage.value" />

<Question>Wie leicht/schwer war es normalerweise für Sie, eine Vertretung für einen Urlaub zu finden?</Question>
<EasynessRadio v-model="vertretung_urlaub.value.value" :error-messages="vertretung_urlaub.errorMessage.value" />

Die dazugehörige Komponente sieht so aus:

<script setup>
const props = defineProps(['modelValue', 'errorMessages'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
    <v-radio-group :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :error-messages="errorMessages">
        <v-radio value="sehr_einfach" label="sehr einfach"></v-radio>
        <v-radio value="eher_einfach" label="eher einfach"></v-radio>
        <v-radio value="weder_noch" label="weder leicht noch schwer"></v-radio>
        <v-radio value="eher_schwer" label="eher schwer"></v-radio>
        <v-radio value="sehr_schwer" label="sehr schwer"></v-radio>
        <v-radio value="unmöglich" label="unmöglich"></v-radio>
    </v-radio-group>
</template>

Das Problem

Der Fragebogen besteht aus mehreren Seiten. Wurde eine Seite aufgerufen und ging der Nutzer dann zurück zur Vorseite, waren die jeweiligen Radio Buttons nicht mehr angehakt. Die jeweiligen Fragen wurden dabei nicht nur mit v-show ausgeblendet, sondern mit v-if aus dem DOM entfernt. Die entsprechenden Fragebogen-Werte waren allerdings weiterhin vorhanden. Nur v-radio-group hat die "Standardwerte" nicht mehr übernommen.

Die Lösung

Vuetify verwendet eine leicht andere Syntax als Vue.js. Gemäß der Vue.js-Dokumentation wird v-model für eigene Komponenten so übergeben:

<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"
 />

Für Vuetify und insbesondere die radio-group sowie radio-Komponenten muss das Ganze aber so aussehen:

<v-radio-group :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)" :error-messages="errorMessages">

Es muss also:

• :model-value statt :value
• @update:modelValue="$emit('update:modelValue', $event)"

verwendet werden.

Weitere Hinweise dazu gibt es in diesem Stackoverflow-Thread.