想要实现一个通过click生成多个题目的效果,每个题目有不同的v-model,每个题目是一个对象,我在数组中定义了多个对象,对象中定义了
四个option, 想要在v-model中实现 v-model="item.'option'+index",应该怎么实现?
我在数组中定义了对象,又在这个对象里面可以定义数组吗?我定义了之后想加元素进去显示数组不存在类型,我应该怎么实现比较好?
HTML部分代码
<!-- 单选题 -->
<div class="danxuan main_workType" v-for="(item,index1) in oneChsObject" :key="index1">
<div class="quesType">{{index1+1}}.单选题</div>
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入题目内容"
v-model="item.content">
</el-input>
<div class="danxuan-options">
<!-- A选项 -->
<div class="option" v-for="(item,index) in oneChsObject[index1].oneChsOptionsCount" :key="index">
<el-button round class="danxuan-chose">{{chsOptions[index]}}</el-button>
<el-input v-model="item.oneChsOption1" placeholder="请输选项A的内容" class="danxuan-input"></el-input>
</div>
</div>
<div class="choose_Btn">
<span class="addBtn"><el-button type="primary" icon="el-icon-plus" circle @click="oneChsOptionAdd(index1)"></el-button>增加选项</span>
<span class="delBtn"><el-button type="danger" icon="el-icon-delete" circle @click="oneChsReduce(index1)"></el-button>删除选项</span>
</div>
<div class="oneChs-answer">
<el-select v-model="oneChs_answer" placeholder="请选择该题答案">
<el-option
v-for="option in chsOptions"
:key="option"
:label="option"
:value="option">
</el-option>
</el-select>
</div>
</div>
JS:点击题目增加的方法:
/* 题目数增加的方法 */
oneChsCountAddBtn(){
this.oneChsCount+=1
let objNum
objNum = this.oneChsCount
var newObject = {}
newObject.num = objNum
newObject.title = "oneChs_title_"+objNum
newObject.content = "oneChs_content_"+objNum
newObject.oneChsOptionsCount = 4
newObject.oneChsOptions[0] = "oneChs_options_1_"+objNum.toString
newObject.oneChsOption1 = "oneChs_options_1_"+objNum
newObject.oneChsOption2 = "oneChs_options_2_"+objNum
newObject.oneChsOption3 = "oneChs_options_3_"+objNum
newObject.oneChsOption4 = "oneChs_options_4_"+objNum
newObject.options_answer = "oneChs_answer_"+objNum
this.oneChsObject.push(newObject)
},
想要达到每个题目中的选项都有不同的v-model
看了一下你的代码,我理解的是,你想有个添加按钮,点一次,加一道空的题目,题目里可以输入标题,和四个选项,如果我没理解的错的话,
首先,我觉得,你要想清楚你的数据结构是怎么样的,是是否是 类似于
oneChsObject:[
{
title:'题目标题',
content:'题目内容',
options_answer :'A',
oneChsOption:[
{
value:'A',
name:'选项A的内容'
},
{
value:'B',
name:'选项B的内容'
},
{
value:'C',
name:'选项C的内容'
},
{
value:'D',
name:'选项D的内容'
},
]
}
]
看了一下你拷贝的代码,oneChsCountAddBtn 调用这个方法的 按钮是不是还在外层,没写在这?逻辑是和你添加 选项差不多的,你点击这个添加题目的按钮时候,将上面这个结构的空对象push 到oneChsObject中,点击添加选项时,通过index1 去找到题目,再去 操作题目中的 oneChsOption 数组,就可以了,
不知道可不可以再另外定义一个数组对象专门存放选项列,再通过遍历选项对象来获得v-model的值