Calculation of vue Multi-group data

for the requirement of test paper generation, try to implement it with vue. The
code is roughly structured as follows: 

<div v-for="(big, index) in all" ><!--  -->

    :<input> :{{bigtotal}}
    
    <button @click="addsmall"></button>
    
    <div v-for="(question, index) in big.question" ><!--  -->
    
    :<input >
    
    </div>
    
</div>
<button @click="addbig"></button>

    var vu = new Vue({
        el: "-sharptodo-list-example",
        data: {
            all:[],
            onebig:{qtype:"",title:"xxx",bmark:0,questions:[]},//
            onesmall:{smark:0,stem:"",answer1:"",answer2:"",answer3:"",answer4:""}//
        },
        methods: {
            addbig: function() {//
               let onebig_str = JSON.parse(JSON.stringify(this.onebig));
               this.all.push(onebig_str);
                //....
            },
            addsmall: function(index) {// 
               let onebig_str = JSON.parse(JSON.stringify(vu.onesmall));
               this.all[index].questions.push(onebig_str);
                //....
                    });
            },
        }
    })

question: when the score of the small question is preset, the score of all the small questions within the big question will change. Modify the score of a small question, and the total score of the big question will be calculated automatically.
since all the big and small questions are generated by clicking the button push, there are two for loops here, how can I calculate the score?
ideas for implementation

Javascript
Jul.19,2022

the score is calculated in the form of monitoring. When the data of the array of big and small questions changes, the score is recalculated
forgive me for walking on the road. If it hasn't been solved, I'll post the code to you
tomorrow

.

add: a rough description of the process; 

<template>
    <div>
        <div v-for="(big, index) in all" :key="index" class="questions">
            <!--  -->
            :<input @input="changeSmall(index, $event)">
            :<input readonly v-model="big.bmark">
            <button @click="addsmall(index)"></button>
            <div v-for="(question, index) in big.questions" :key="index"><!--  -->
            :<input v-model="question.smark">
            </div>
        </div>
        <button @click="addbig"></button>
    </div>
</template>
<script>
export default {
  data () {
    return {
      all: [],
      onebig: { qtype: '', title: 'xxx', bmark: 0, questions: [] }, // 
      onesmall: { smark: 0, stem: '', answer1: '', answer2: '', answer3: '', answer4: '' } // 
    }
  },
  watch: {
    all: {
      handler (newVal) {
        console.log(newVal)
        this.all.forEach(ele => {
          if (ele.questions.length > 0) {
            let smark = 0
            ele.questions.forEach(e => {
              smark += parseInt(e.smark)
            })
            ele.bmark = smark
          }
        })
        return newVal
      },
      deep: true
    }
  },
  created () { },
  methods: {
    addbig: function () {
      let onebig = JSON.parse(JSON.stringify(this.onebig))
      this.all.push(onebig)
      this.onesmall.smark = 0
    },
    addsmall: function (index) {
      let onebig = JSON.parse(JSON.stringify(this.onesmall))
      this.all[ index ].questions.push(onebig)
    },
    changeSmall: function (index, e) {
      if (this.all[ index ].questions.length >= 1) {
        this.all[ index ].questions.forEach(ele => {
          ele.smark = e.target.value
        })
      } else { // 
        this.onesmall.smark = e.target.value
      }
    }
  }
}
</script>

<style>
input{
    width: 200px;
}
.questions{
 padding: 40px 0;
 border: 1px solid -sharpcccccc
}
</style>

clipboard.png

computed , recalculate whenever the data changes.

Previous: The pit that axios encountered when uploading file files, no multipart boundary was found

Next: What is the software that frames on the screen when recording a video?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu