<template>
<div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="80px"
size="small"
class="demo-ruleForm"
>
<el-form-item label="问题" prop="question">
<el-input
v-model="ruleForm.question"
maxlength="30"
clearable
placeholder="请输入问题"
></el-input>
</el-form-item>
<div v-for="(item, index) in ruleForm.items" :key="index">
<el-form-item
:label="'选项' + (index + 1)"
:prop="`items[${index}].answer`"
:rules="{ required: true, message: '请输入答案', trigger: 'blur' }"
>
<el-input
v-model="item.answer"
maxlength="30"
clearable
placeholder="请输入答案"
></el-input>
<el-button
v-if="index > 0"
type="text"
@click="deleteItem(index)"
size="small"
>删除</el-button
>
</el-form-item>
</div>
<el-form-item label="">
<el-button
:disabled="ruleForm.items.length >= 5"
type="text"
@click="addItem()"
size="small"
icon="el-icon-plus"
>确认添加</el-button
>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
question: "",
items: [
{
answer: "",
},
],
},
rules: {
question: [{ required: true, message: "请输入问题", trigger: "blur" }],
},
};
},
created() {},
mounted() {},
methods: {
addItem() {
if (this.ruleForm.items.length >= 5) return;
this.ruleForm.items.push({
answer: "",
});
},
deleteItem(index) {
this.ruleForm.items.splice(index, 1);
},
},
};
</script>
<style scoped lang="scss"></style>