上代码
引入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('提交失败')
          }
        }
      }
    })
Logo

前往低代码交流专区

更多推荐