目前想操作一个vue.js设计的问卷。代码如下。
HTML:
<form class="" id="form">
<div class="form-body">
<template v-for="i in size">
<div class="form-group">
<input class="input-xlarge" type="text" name="" value="" placeholder="1" :placeholder="'题目'+i">
</div>
<div class="form-group">
<input class="input-xlarge" type="text" name="" value="" placeholder="答案A">
</div>
<div class="form-group">
<input class="input-xlarge" type="text" name="" value="" placeholder="答案B">
</div>
<div class="form-group">
<input class="input-xlarge" type="text" name="" value="" placeholder="答案C">
</div>
<div class="form-group">
<input class="input-xlarge" type="text" name="" value="" placeholder="答案D">
</div>
<div class="form-group">
<input class="input-xlarge" type="text" name="" value="" placeholder="答案E">
</div>
<hr>
</template>
<p>默认显示{{size}}个空题目 <a href="javascript:;" class="btn cbtn pull-right" @click="add()">继续增加</a> </p>
</div>
<div class="form-actions clear">
<button type="submit" class="btn green">保存</button>
</div>
</form>
Vue.js
new Vue({
el: '#form',
data: {
size: 2
},
methods: {
add: function() {
this.size += 1;
}
}
})
求教大家,上述代码中,我提交多个的话,怎么获取到多问卷的值,怎么较为方便的设计一个删除答案的按钮?
我觉得你的size不应该是一个纯数字、应该给一个数组、因为以后的题库传过来也应该是直接可以用的、也方便绑定各种状态也方便拓展
首先可以在data声明一个空数组、
你上面的操作每次写的答案如果是四个都必填、那就要根据当前的id也好、你定的index也好、将这个标记用作ID、存入空数组
这样就知道哪道题答过、没答过
具体的输入框都分别做双向绑定