页面如下

image.png

结构

// vant单选框结合Cell 组件一起使用
 <div class="topic" v-for="(row,index) in List" :key = 'index'>
      <div class="title">{{index+1}}．{{row.QuestionName}}</div>
      <div class="option">
       // 双向绑定van-radio的name
        <van-radio-group v-model="row.answer">
          <van-cell-group>
            <van-cell v-for="(item,idx) in row.QuestionList" :title="item.Subject" :key="idx" clickable @click="getSelect(row,item)" :border="false">
              <van-radio slot="right-icon" checked-color="#009e96" :name="item.Subject" />
            </van-cell>

          </van-cell-group>
        </van-radio-group>
      </div>
    </div>

methods: {
   // 关键是绑定选中的答案(以name映射)
    getSelect (row, item) {
      row.answer = item.Subject
      console.log(this.List)
    },

List数据格式如下

image.png

对提交按钮的控制
用watch检测List选中的answer的变化

watch: {
    List (newValue, oldValue) {
      let length = 0
      this.List.forEach(item => {
        if (item.answer) {
          length++
        }
      })
      console.log(length)
      if (length == this.List.length) {
        this.All = true       //  在data中默认All给false
      }

      console.log(this.All)
    }

提交数据给后台

goNext () {
      var QuestionList = []
      var OptionList = []
      this.List.forEach(item => {
        QuestionList.push(item.QuestionId)
        OptionList.push(item.answer)
      })
      const params = {
        QuestionList: QuestionList,
        OptionList: OptionList,
        PaperNo: this.PaperNo
      }
      this.$http.post('/pweb/pweb-invest.FinanceRiskAssessSubmit.do', params).then(res => {
        this.$router.push({
          name: 'riskResult',
          query: {
            TransChannel:this.transChannel,
            ...res
          }
        })
      })
    },