vue使用label标签实现多项单选操作
上代码引入Vue文件<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>css部分<style>li {list-style: none;}.content-box {width: 1158;padding: 20px 48px 0 48px;margin-bottom: 66p
·
上代码
引入Vue文件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
css部分
<style>
li {
list-style: none;
}
.content-box {
width: 1158;
padding: 20px 48px 0 48px;
margin-bottom: 66px;
border: 1px solid #e3e3e3;
}
.content-box ul {
width: 100%;
}
.contentTitle {
font-size: 24px;
text-align: center;
}
.contentTitle div {
color: #0694e4;
}
.contentAccess {
font-size: 16px;
text-align: center;
margin-top: 12px;
}
.contentAccess div {
display: inline;
margin-left: 20px;
color: #575757;
}
.content p {
color: #575757;
}
.content .box {
width: 100%;
height: 190px;
margin-top: 20px;
padding-top: 20px;
padding-left: 20px;
box-sizing: border-box;
border: 1px solid #e3e3e3;
}
.content .box .checkBox {
display: block;
margin-top: 8px;
}
.content .box .checkBox span {
margin-left: 10px;
}
.content-box button {
display: block;
width: 200px;
height: 44px;
font-size: 18px;
margin: 0 auto;
margin-top: 70px;
margin-bottom: 50px;
border: 0;
border-radius: 5px;
color: #fff;
cursor: pointer;
background-color: #0694e4;
}
</style>
html部分
<div id="app">
<div class="content-box" v-for="(item, index) in list" :key="index">
<ul>
<li class="contentTitle">
<div>{{item.title}}</div>
</li>
<li class="content" v-for="(item, index) in item.questionList" :key="index">
<p>{{item.title}}</p>
<div class="box">
<label v-for="(item, index) in item.options" :key="index" class="checkBox" :name="item.qusetionId">
<input :value="index" :name="item.qusetionId" type="radio"
@change="selectValue(item.name, item.title, item.qusetionId)" />
<i></i>
<span>{{item.name}}</span>
<span>{{item.title}}</span>
</label>
</div>
</li>
</ul>
<button @click="submit">提交</button>
</div>
</div>
js部分
const vm = new Vue({
el: '#app',
data() {
return {
list: [{
title: '我是整个这个投票项目名称',
id: 999,
questionList: [{
id: 888,
title: '夏天最喜欢的食物',
options: [{
value: 0,
qusetionId: 888,
name: 'A',
title: '西瓜'
},
{
value: 1,
qusetionId: 888,
name: 'B',
title: '香蕉'
},
{
value: 2,
qusetionId: 888,
name: 'C',
title: '苹果'
},
{
value: 3,
qusetionId: 888,
name: 'D',
title: '橘子'
}
]
},
{
id: 777,
title: '夏天最喜欢的运动',
options: [{
value: 0,
qusetionId: 777,
name: 'A',
title: '跑步'
},
{
value: 1,
qusetionId: 777,
name: 'B',
title: '走步'
}
]
},
{
id: 666,
title: '动物',
options: [{
value: 0,
qusetionId: 666,
name: 'A',
title: '大象'
},
{
value: 1,
qusetionId: 666,
name: 'B',
title: '老虎'
},
{
value: 2,
qusetionId: 666,
name: 'C',
title: '狮子'
}
]
},
{
id: 555,
title: '中国',
options: [{
value: 0,
qusetionId: 555,
name: 'A',
title: '河南'
},
{
value: 1,
qusetionId: 555,
name: 'B',
title: '福建'
},
{
value: 2,
qusetionId: 555,
name: 'C',
title: '上海'
},
{
value: 3,
qusetionId: 555,
name: 'D',
title: '广东'
}
]
}
]
}],
arr: []
}
},
methods: {
selectValue(name, title, id) {
this.arr.push({
survery_id: this.list[0].id,
qusetion_id: id,
title: title,
name: name
})
this.arr.forEach(item => {
if (item.qusetion_id === id) {
item.qusetion_id = id
item.title = title
item.name = name
}
})
},
submit() {
// 提交的时候进行数组去重保证用户不管怎么选择最后提交的时候永远是最后选择的每一部分的最后选择的哪一项
var questionList = []
questionList[0] = this.arr[0]
for (var i = 0; i < this.arr.length; i++) {
for (var j = 0; j < questionList.length; j++) {
if (questionList[j].qusetion_id === this.arr[i].qusetion_id) {
break
}
if (j === questionList.length - 1) {
questionList.push(this.arr[i])
}
}
}
if (this.list[0].questionList.length === questionList.length) {
console.log(questionList)
} else {
alert('提交失败')
}
}
}
})
更多推荐
已为社区贡献1条内容
所有评论(0)