使用vue渲染表单元素

为什么80%的码农都做不了架构师？>>>   

Question.vue的代码，学习了如何使用vue渲染表单。v-model的名称是变量的时候使用数组，如果是多选框提前定义好变量类型。不然多选框值变成true或者false

<template>
  <div class="Questionnaire">
    <div id="content" class="content">
      <div class="no_data_row">
        <div>抱歉还没有相关记录</div>
      </div>
      <div class="singleList">

        <div class="type">一、单选题</div>
        <div class="single" v-for="(single,index) in singles">
          <div class="problem" v-text='index+1+"、"+single.question'></div>
          <div class="Options" v-for="Option in single.question_option">
            <label><input :name='"S"+(index+1)' v-model='S[index+1]' type="radio" :value="Option" :is_require="single.is_require" >{{Option}}</label> <br>
          </div>
        </div>
      </div>

      <div class="MultipleList">
        <div class="type">二、多选题</div>
        <div class="Multiple" v-for="(Multiple,index) in Multiples">
          <div class="problem" v-text='index+1+"."+Multiple.question'></div>
          <div class="Options" v-for="Option in Multiple.question_option">
            <label><input :name='"M"+(index+1)' v-model='M[index+1]' type="checkbox" :value="Option" :is_require="Multiple.is_require">{{Option}}</label><br>
          </div>
        </div>
      </div>
      <div class="hortAnswerList">
        <div class="type">
          <div class="type">三、简答题</div>
          <div class="hortAnswer" v-for="(hortAnswer,index) in hortAnswers">
            <div class="problem" v-text='index+1+"."+hortAnswer.question'>7.你对本次团建有什么建议或意见</div>
            <textarea :name='"H"+(index+1)' v-model='H[index+1]' id="" is_require="0"></textarea>
          </div>
        </div>
      </div>
      <div class="btn" @click="submit"></div>
      <div>{{$store.state.layer_content}}</div>
    </div>
  </div>
</template>

<script>
    import axios from 'axios'
    import store from '@/vuex/store'
    import {state,mutations} from '@/vuex/store'

    var instance = axios.create({
        baseURL: 'http://www.wljkxys.com/api3c',
        timeout: 1000,
        //headers: {'token': '123456789'}
    });
   instance.defaults.headers.common['token'] = '123456789';
export default {
  name: 'Questionnaire',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      singles:{},
      Multiples:{},
      hortAnswers:{},
        S:[],
        M:[],
        H:[],
        answer_content:""
    }
  },

  created(){
    this.load();

  },
  methods: {
      closeDialog: function () {
          this.show = false;
      },
      load: function () {
          axios.get('http://www.wljkxys.com/api3c/yao_questionnaire/getQuestionnaireDetail?user_id= 8&yao_questionnaire_id= 30')
              .then(response => {
                  console.log(response);
                  var data = response.data.data;
                  this.singles = data.include_radio;
                  this.Multiples = data.include_select;
                  this.hortAnswers = data.include_answer;
                  console.log(this.singles.length);
                  for (var i = 0; i <= this.singles.length; i++) {
                      this.S.push("");
                  }
                  for (var i = 0; i <= this.Multiples.length; i++) {
                      this.M.push([]);
                  }
              })
              .catch(error => {
                  console.log('网络错误，不能访问');
              })
      },
      submit: function () {
          this.answer_content = "";
          for (var i = 1; i < this.S.length; i++) {
              this.answer_content = this.S[i] + "|;";
              console.log("jja");
              console.log("this.S[" + i + "]==" + typeof(this.S[i]));
              if (this.S[i] == ""){
                this.$store.commit("setLayerContent","请填写完整");
               // setTimeout('this.$store.commit("setLayerContent","")',2000);
               var vue = this;
               console.log(vue)
                setTimeout('console.log(vue)',2000);
//                setTimeout('alert(111)',2000);
              }
//              layer.open({content: '请填写完整！', skin: 'msg', time: 2});
              return;

          }
          console.log(this.answer_content);

      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  iframe {
    display: none;
  }
  .Questionnaire{
    text-align: start;
  }
  .type{
    font-size:0.32rem;
    color:rgba(17,17,17,1);
    font-weight: 600;
    line-height: 0.7rem;
  }
  .content{
    margin-top: 0.97rem;
    padding: 0.3rem 0.32rem;
  }
  .problem{
    font-size:0.32rem;
    color:rgba(17,17,17,1);
    font-weight: 600;
    line-height: 0.7rem;
  }
  .Options{
    color:rgba(22,22,22,1);
    font-size:0.32rem;
    line-height: 0.6rem;
  }
  .Options input{
    margin-right: 0.23rem;
  }

  input[type=radio],input[type=checkbox] {
    display: inline-block;
    vertical-align: middle;
    width: 0.26rem;
    height: 0.26rem;
    -webkit-appearance: none;
    background-color: transparent;
    border: 0;
    outline: 0 !important;
    color: #d8d8d8;
  }

  input[type=radio]:after,input[type=checkbox]:after {
    content: "";
    display:block;
    width: 0.26rem;
    height: 0.26rem;
    border-radius: 50%;
    text-align: center;
    line-height: 14px;
    color: #fff;
    border: 1px solid #616161;
    background-color: #fff;
    box-sizing:border-box;
  }

  input[type=radio]:checked:after,input[type=checkbox]:checked:after {
    width: 0.23rem;
    height: 0.23rem;
    border: 0.03rem solid #fff;
    background-color: rgba(102,214,166,1);
    background-size: 0.2rem 0.2rem;
    background-position:center center ;
    position: relative;
    box-shadow: 0 0 0 1px rgba(102,214,166,1);
  }
  textarea{
    margin-top: 0.25rem;
    padding: 0.2rem;
    font-size: 0.32rem;
    width:6.40rem;
    height:2.1rem;
    border:1px solid rgba(180,180,180,1);
  }
  .btn{
    margin: 0.8rem auto 0.3rem auto;
    width:6.34rem;
    height: 0.8rem;
    background: url("../assets/mind_ques_commit@2x.png")no-repeat;
    background-size: 6.34rem 0.8rem;
  }
  .no_data_row{
    display: none;
    min-height: 8rem;
    background: url("../assets/i_no_data@2x.png")no-repeat;
    background-position: center 3.5rem;
    background-size: 30%;
  }
  .no_data_row div{
    position: absolute;
    top:6rem;
    font-size:0.28rem;
    color:rgba(172,172,172,1);
    text-align: center;
    width: 96%;
  }
</style>

转载于:https://my.oschina.net/dmq/blog/1831914