The following is a front-end code example for Vue to implement single-choice questions, multiple-choice questions, and cascading multiple-choice questions:
- Multiple choice questions
<template>
<div>
<h3>{
{ question }}</h3>
<div v-for="(option, index) in options" :key="index">
<input type="radio" :id="index" :value="option" v-model="selectedOption">
<label :for="index">{
{ option }}</label>
</div>
</div>
</template>
<script>
export default {
props: {
question: String,
options: Array,
},
data() {
return {
selectedOption: null,
};
},
};
</script>
2. Multiple choice questions
<template>
<div>
<h3>{
{ question }}</h3>
<div v-for="(option, index) in options" :key="index">
<input type="checkbox" :id="index" :value="option" v-model="selectedOptions">
<label :for="index">{
{ option }}</label>
</div>
</div>
</template>
<script>
export default {
props: {
question: String,
options: Array,
},
data() {
return {
selectedOptions: [],
};
},
};
</script>
3. Cascading multiple-choice questions
<template>
<div>
<h3>{
{ question }}</h3>
<div>
<select v-model="selectedOption1" @change="onChangeOption1">
<option disabled value="">请选择</option>
<option v-for="(option, index) in options1" :key="index" :value="option">{
{ option }}</option>
</select>
</div>
<div v-if="options2.length > 0">
<select v-model="selectedOption2" @change="onChangeOption2">
<option disabled value="">请选择</option>
<option v-for="(option, index) in options2" :key="index" :value="option">{
{ option }}</option>
</select>
</div>
<div v-if="options3.length > 0">
<select v-model="selectedOption3">
<option disabled value="">请选择</option>
<option v-for="(option, index) in options3" :key="index" :value="option">{
{ option }}</option>
</select>
</div>
</div>
</template>
<script>
export default {
props: {
question: String,
options: Array,
},
data() {
return {
selectedOption1: null,
selectedOption2: null,
selectedOption3: null,
options1: [],
options2: [],
options3: [],
};
},
methods: {
onChangeOption1() {
const selected = this.options.find((option) => option.value === this.selectedOption1);
this.options2 = selected.children || [];
this.options3 = [];
this.selectedOption2 = null;
this.selectedOption3 = null;
},
onChangeOption2() {
const selected = this.options2.find((option) => option.value === this.selectedOption2);
this.options3 = selected.children || [];
this.selectedOption3 = null;
},
},
};
</script>