In der Frontend-Entwicklung ist es häufig notwendig, Multiple-Choice-Fragenkomponenten zu verwenden. In diesem Artikel wird erläutert, wie Sie mit Vue eine einfache Multiple-Choice-Fragenkomponente implementieren und entsprechende Codebeispiele bereitstellen.
Zunächst müssen wir die von der Komponente benötigten Daten und Ereignisse basierend auf den Merkmalen der Multiple-Choice-Fragenkomponente definieren. In Vue können Komponentendaten und Ereignisse über Requisiten und Setup definiert werden. Der Code lautet wie folgt:
<template>
<div>
<label v-for="(option, index) in options" :key="option.id">
<input
type="radio"
:name="'radio-' + id"
:value="option.id"
v-model="selectedOptionId"
:checked="option.isRight"
@click="handleClick(option, index)"
/>
{
{ String.fromCharCode(65 + index) }}. {
{ option.content }}
</label>
</div>
</template>
<script>
import {
defineProps, onMounted, ref } from 'vue';
export default {
props: {
options: {
type: Array,
default: () => [],
},
},
setup(props) {
const id = ref(Math.floor(Math.random() * 900000 + 100000));
const selectedOptionId = ref(null);
onMounted(() => {
selectedOptionId.value =
props.options.find((option) => option.isRight)?.id || props.options[0].id;
});
function handleClick(option, index) {
props.options.forEach((opt, i) => {
opt.isRight = false;
if (i === index) opt.isRight = true;
});
}
return {
id,
selectedOptionId,
handleClick,
};
},
};
</script>
Der obige Code definiert eine Single-Choice-Fragenkomponente, die die folgenden Daten und Ereignisse umfasst:
- props: Optionen, was darauf hinweist, dass die Komponente eine Reihe von Optionen empfangen muss.
- Daten: selectedOptionId, gibt die aktuell ausgewählte Options-ID an.
- Methode: handleClick, wird zum Behandeln des Klickereignisses der Option verwendet.
Der Vorlagenteil der Komponente verwendet die v-for-Direktive, um das Optionsarray zu durchlaufen und eine einzelne Optionsliste zu generieren. Gleichzeitig wird die ID der ausgewählten Option in der Optionsliste über das V-Modell an die Variable selectedOptionId gebunden, um die Verwaltung der ausgewählten Option zu realisieren.
Innerhalb der Komponente ist außerdem eine handleClick-Funktion definiert, die zur Verarbeitung von Einzeloptions-Klickereignissen verwendet wird. Wenn eine Option ausgewählt wird, bindet diese Funktion die aktuell ausgewählte Options-ID an die Variable selectedOptionId und aktualisiert die Eigenschaft isRight in der Optionsliste, um sicherzustellen, dass nur eine Option als richtige Antwort festgelegt ist.
Schließlich initialisiert die Komponente die ausgewählte Options-ID in der gemounteten Hook-Funktion mit der ID des standardmäßig ausgewählten Elements. Wenn die richtige Option nicht gefunden werden kann, wird die ID der ersten Option als standardmäßig ausgewähltes Element verwendet.
Die Komponenten werden wie folgt verwendet:
<template>
<Radio
:options="[
{ id: '1', content: 'A. 选项 A', isRight: true },
{ id: '2', content: 'B. 选项 B', isRight: false },
{ id: '3', content: 'C. 选项 C', isRight: false },
{ id: '4', content: 'D. 选项 D', isRight: false },
]"
/>
</template>
<script>
import Radio from './Radio.vue';
export default {
components: {
Radio,
},
};
</script>
Der obige Code zeigt, wie die Single-Choice-Komponente in einer Vue-Komponente verwendet und ein Array mit Optionsdaten an die Komponente übergeben wird.
Bisher haben wir die Implementierung der Vue-Single-Choice-Fragenkomponente abgeschlossen. Ich hoffe, dieser Artikel hilft Ihnen!