preliminary/src/components/Detail.vue

<template>
  <div class="detail-wrap">
    <!-- <div v-for="(item,index) in datas"> -->
    <div v-for="(item,index) in checkDatas.questionMapping">
      <Radio v-if="item.controlType==1" 
            :item="item" 
            :indx="index+1"
            :key="item.id"
            @updata="updataData"/>
      <CheckBox v-if="item.controlType==2" :item="item" :indx="index+1"/>
      <!-- 输入框 -->
      <div class="inp" v-if="item.controlType==6">
        <p class="name">{{index+1+'.'+item.name}}</p>
        <input type="" name="">
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import Radio from '../common/Radio.vue';
import CheckBox from '../common/CheckBox.vue';
// 将获取到的数据源转换成私有数据，处理选择事件。点击完成后统一存到store中，便于回读
  export default {
    name:'Detail',
    data(){
      return{
        checkDatas:{}
      }
    },
    props:['datas'],
    created(){
      this.checkDatas = JSON.parse(JSON.stringify(this.datas));
    },
    components:{
      Radio,
      CheckBox
    },
    methods:{
      updataData(data){
        const origMapping = this.datas.questionMapping;
        let mapping = this.checkDatas.questionMapping;
        for(let i in origMapping){
          if(origMapping[i].id==data.id){
            mapping.splice(i,1,data)
          }
        }
      },
      saveData(){//存值
        const datas = this.checkDatas.questionMapping;
        let text = "";
        for(let i in datas){
          if(datas[i].value){
            text += datas[i].value+'，';
          }
        }
        let msg = this.checkDatas.name+ '，' + text;
        this.$store.commit('setDatas',{data:this.checkDatas,pId:this.checkDatas.id,type:"1"});
        this.$store.commit('setText',{text:msg,pId:this.checkDatas.id,type:"1"});
      }
    },
    /*watch:{
      checkDatas:{
        handler(newVal,oldVal){
          console.log("详情数据更新:",newVal,oldVal); 
        },
        deep:true
      }
    },*/
  }
</script>
<style lang="less" scoped>
  .detail-wrap{
    padding: .3rem .5rem .3rem .6rem;
  }
</style>