效果展示:
点击增加选项和答案后,会按顺序新增24位的英文字母:
<!-- html -->
<el-button type="danger" size="small" @click="addQuestion">+增加选项与答案</el-button>
<!-- js -->
<script>
export default {
data(){
return {
i:0,
form: {
// 选项
options: [
{
// 选中的A B C D
code: 'A',
// input中输入的每个选项
title: '',
// 图片url
img: '',
// 布尔值true或false,选的哪个选项,哪个选项就为true
isRight: false
},
{
code: 'B',
title: '',
img: '',
isRight: false
},
{
code: 'C',
title: '',
img: '',
isRight: false
},
{
code: 'D',
title: '',
img: '',
isRight: false
}
]
}
},
methods:{
// 随机顺序生成ABCDE...字母的函数
setDesc() {
const letterArr = []
// 字母A的code值是65,但因为已经到字母D了,所以直接从69E开始循环
for (let i = 69; i < 91; i++) {
letterArr[i] = String.fromCharCode(i)
}
return letterArr
},
// 增加选项和答案按钮
addQuestion() {
// 调用随机顺序生成ABCDE...字母的函数,可以打印randomAbc 数组看下
// 有69个元素是空的,所以直接进行了截取
const randomAbc = this.setDesc().splice(69)
const res = [
...this.form.options,
{
code: randomAbc[this.i],
title: '',
img: '',
isRight: false
}
]
this.i++
this.form.options = res
}
}
}
</script>