~Vue實現簡單答題功能，主要包含單選框和復選框

內容

　　實現簡單答題效果

環境

　　Vue,webpack(自行安裝)

實現方式

　　頁面將答題列表傳遞給調用組件，組件將結果返回給調用頁面(其它模式也ok，這只是例子)

--------------------------------------------分割線-----------------------------------------------

組件 zujian8.vue

<template>
  <div class="aaaa">
    <div class="div" v-for="(son,index) in list_a" :key="index">
      <div class="question">問題:{{son.question }}</div>
      <div class="type">類型：{{son.type=== 1 ? '單選' : '多選' }}</div>
      <div v-if="son.type === 1" class="answer">
        <li v-for="(sson,index1) in son.answer" :key="index1" >
          <span>{{sson.value}}</span>
          <input type="radio" :name="son.name"  :value="sson.value" @change="get_radio_value(index)" v-model="checkedValue[index]" >
        </li>
        <div style="clear: both"></div>
      </div>
      <div v-else class="answer">
        <li v-for="(sson,index1) in son.answer" :key="index1">
          <span>{{sson.value}}</span>
          <input type="checkbox" :name="son.name" :value="sson.value" @change="get_checkbox_value(index)" v-model="checkedValue1" >
        </li>
      </div>
      <hr>
    </div>
    <button @click="btnfun">提交</button>
 </div>
</template>

<script>
export default {
  name: 'input8',
  data: function () {
    return {
      all_list: [],
      checkedValue: [], // 綁定單選框的值
      checkedValue1: [] // 綁定復選框的值
    }
  },
  props: ['list_a'],
  methods: {
    btnfun: function () {
      // 獲取input框的值
      console.log(this.all_list)
      // 如果答案長度不匹配list_a
      // this.all_list = this.all_list.null
      // console.log(this.all_list)
      for (var i = 0; i < this.all_list.length; i++) {
        if (this.all_list[i] === '' || typeof (this.all_list[i]) === 'undefined') {
          this.all_list.splice(i, 1)
        }
      }
      // 循環
      if (this.list_a.length !== this.all_list.length) {
        console.log('答案沒有選擇完畢')
      } else {
        console.log('答案選擇完畢')
        // 傳值給調用頁面
        this.$emit('transfer', this.all_list)
      }
    },
    get_radio_value: function (index) {
      // 獲取當前radio當前值
      console.log((index + 1) + '題' + this.checkedValue)
      this.all_list[index] = this.checkedValue[index]
    },
    get_checkbox_value: function (index) {
      // 獲取當前復選框的值
      console.log((index + 1) + '題' + this.checkedValue1)
      this.all_list[index] = this.checkedValue1
    }
  }
}
</script>
<style scoped>
li{
  list-style: none;
}
.div{
  margin: 6px 0px;
}
.question {
  width:300px;
  text-align: left;
}
.type{
  width:200px;
  text-align: left;
}
.answer li{
  width:100%;
  height: 20px;
}
.answer span{
  float: left;
}
.answer input{
  float: right;
}
</style>

調用頁面 test.vue

該頁面較長我就復制關鍵部分的代碼

--------------------------------------------分割線-----------------------------------------------

組件引入

import input8 from './zujian8'   //引入

組件注冊

components: {
    input8
  },

初始化答案數據

 

data () {
    return {
      list_a: [
        {'type': 1, 'name': 'one', 'question': 'Are you programmer?', 'answer': [{'value': 'A.Yes'}, {'value': 'B.No'}]},
        {'type': 1, 'name': 'two', 'question': 'Are you a man?', 'answer': [{'value': 'A.Of course'}, {'value': 'B.No'}]},
        {'type': 1, 'name': 'three', 'question': 'Are you a Staff?', 'answer': [{'value': 'A.Yes'}, {'value': 'B.No'}]},
        {'type': 1, 'name': 'four', 'question': 'Are you in sichuan?', 'answer': [{'value': 'A.Yes'}, {'value': 'B. No'}]},
        {'type': 2, 'name': 'five', 'question': 'How about your in skills?', 'answer': [{'value': 'A.Python'}, {'value': 'B.Vue'}, {'value': 'C.Php'}, {'value': 'D.Java'}]}
      ]
    }
  }

調用組件，接收組件返回值

<div class="xxxx">
      <input8 :list_a="list_a" @transfer = 'postAnswer'/>
      <!--<button @click="buttonFun">提交</button>-->
</div>

定義函數

methos: {
  postAnswer: function (msg) {
      console.log(msg)
    }  
}

頁面截圖

如上圖所示。