填空题的选择数据每个空都是动态生成的
时间: 2024-02-20 16:02:16 浏览: 35
如果填空题的选择数据每个空都是动态生成的,可以将数据存储在数组或对象中,然后利用v-for指令动态渲染出每个空的选项。例如:
```html
<template>
<div>
<div v-for="(item, index) in blanks" :key="index">
<span>第{{ index + 1 }}个空:</span>
<select v-model="selectedValues[index]">
<option v-for="(option, optionIndex) in item.options" :key="optionIndex" :value="option">{{ option }}</option>
</select>
</div>
<button @click="handleSubmit">提交</button>
</div>
</template>
<script>
export default {
data() {
return {
blanks: [
{ options: ['选项A', '选项B', '选项C'] },
{ options: ['选项D', '选项E', '选项F'] },
{ options: ['选项G', '选项H', '选项I'] }
],
selectedValues: []
}
},
methods: {
handleSubmit() {
console.log(this.selectedValues)
}
}
}
</script>
```
在上面的代码中,blanks数组存储了每个空的选项数据,selectedValues数组存储了每个空选中的值。在模板中,使用v-for指令动态渲染出每个空的选项。在每个select元素中,使用v-model指令将选中的值绑定到对应的selectedValues元素中。在点击提交按钮时,可以通过访问selectedValues数组来获取每个空的选中值。