我尝试使用分页来创建一个动态表单。在每个页面上可能有一组复选框或单选按钮。这些是问题的答案选项。一个问题可能有一个或多个答案，因此无线电和复选框。给定的答案必须存储为每个问题的参数值。一切似乎工作正常，只要我只使用收音机或只是复选框。一旦我混合这两者并使用分页，事情就变糟了。我做了一个VUEPlayground来说明这个问题：
https://play.vuejs.org/#eNrNVN9r2zAQ/ldufqgT8nPQJ9cJG2UMCt3KNgqj6YNiXxMRWXJl2W0o+d93si3F6ZKxhw1aKNJZ33367vRdXoKPeT6uSgyiIC4SzXMzX0h8zpU2kOIDK4WBl4UESJlhvX6zB9BoSi1dBPCgdHajCm64khFMh+77SqsyL6I7DwQw3AiMIFxxLYpw6D47wMIka0w2mH5hGRYR3N17Msrd5ja1RizVc9g5ki08vGZ6Gw7DT1nGaPkqeMVZeO+AO59yRNJSbUnRP1NyxZINSbhSa0nLNd/gX+q4XCtVICiJp9WE3StbNZqlXB2V8g1TkvBZI1opP1EI9USbm1Lnoquq3e3s0kjM0KxVSiStTjKH+W4w7/W9cLPmxZhJnjH7/DCDsAlwpEoTXjhYgeYHz5C+9chIs/lB5ScpuNwztLiu2WAwg/cesBvC+XTab2PX41xj5SW/CdGjP4iuW+9fXdI2nvjJpMBglgu6pI4A4pRXwNPZIggLTCx7CIODeVwEBN2PWLw+b2Py3ks7oXfdhPtxbUTYtTLiiU+xt80vGyM6d50i6fqVuOKJzT1QUgqvJBYcqhERUCE9Szykop77wOVx8vruRQDRBre2diaLJ9ThwGb5gu3UxFzmpYHIjggBj5dLZ5arbqNltkHFRGkzXGxXe9NjiUXd5kHdADqqRplKUZxi7/aB0BPXA0PiBFuigKipu6GbUz/trm5Zfb5v0kRw9xAT37z9y0AiWFEQkxUwYrUb6Mp9/rI0huy3t2bz59KWRgL9j3JNNtbbRfAaWI34Q0vvvfxuNoMp1fUa+yERPNkQ2o1fRwjAmSjYY6ku4FZpvsJ9hY3E/y+5eaqxQLky69/TvHr3e3eg/laJFcoU4Uw3ZZzQ/9rzLo4nfoqD3S8sXkQM
在输入上方，您可以看到decheckedNames var的结果。如果你转到第三个问题，你会看到这个var也保存了第二个问题的答案。
我也有一个没有分页的例子。一切都如预期的那样工作：
https://play.vuejs.org/#eNqtUsFq3DAQ/ZXBFyXsZn3pybgLJZRCIG3orcQ5aK1JVqwsubLs7LLsv3dGthUXUughYDwa6c3ovTc6Z1/adjP0mBVZ2dVet2FbWTy2zgdQ+Cx7E+BcWQAlg7y6HtcAHkPv7ZwBvHjXt13xmDYAgg4GCxAv2ptOrOftGVCFeo/1AdV32WBXwOPTelF7ark0InbuKBZHdoKLe+lPYi2+No2k8MPoQUvxNAMvqeQdSjt3IkYfxuRO1geicOf2lsK9PuB/8rjdO9chOIv/ZiOWV05svFTavUvlJyqi8M0jMpVfaIx7pcVD71uzZDWtLhzoR1+Zp/FTErBpjQxIGY+M/6XSAww3z85/rrKrOPA1aKvweE1hegFVBoVWBBAd1kE7K2AFVNI8uE5zXmWx5fwOyv2nKSeDzmOTTbQHLpEcQfKEYQrb29GeWXOqWtpGxWXO4L/u6k26qzT6TQt3IilqIWQTu7OaA55YjrTdK3qxYljSwNMqtW37AAWPhoCTAkqSFdyKk0GaniFzzpFb/+6xi1atoiY6Gm4ap9CkdktpdJzPsgJdb+QODRSjlLF+S57wKroQz99050bPZubJjzjeya8yT7PPLn8AHOpAJA==
有人知道我的剧本出了什么问题吗？

<script>
export default {
  data() {
    return {
      formPosition: 0,
      groups:[{
        title: 'girls',        
        checkedNames: [],
        type: 'checkbox',
        names: ['Mary','Emma','Olivia']
      },
      {
        title: 'boys',
        checkedNames: [],
        type: 'checkbox',
        names: ['Jack','John','Mike']
      },
      {
        title: 'Choose one',
        checkedNames: '',
        type: 'radio',
        names: ['Red','Green','Yellow','Purple']
      }]
    }
  },
  methods: {
    nextStep(){
      setTimeout(() => {
        this.formPosition += 1;
      }, 400);
    },
    prevStep(){

      setTimeout(() => {
        this.formPosition -= 1;
      }, 400);
    }
  }
      
}
</script>

<template>

  <div id="'section' + formPosition">
    
    <h4>
      {{ groups[formPosition].title }}
    </h4>
    <div>Checked names: {{ groups[formPosition].checkedNames }}</div>
    
    <ul>
      <li v-for="(name, idx) in groups[formPosition].names" :key="'answer'+ idx">
        <input :type="groups[formPosition].type" :id="name" :value="name" :name="'question'+ name" v-model="groups[formPosition].checkedNames" />
            <label :for="name">{{ name }}</label>
      </li>
    </ul>
    
    <div class="form-actions">
      <button 
              class="btn btn-primary"
              v-if="formPosition !== 0" 
              @click="prevStep">
        &lsaquo; Previous
      </button>
      <button 
              class="btn btn-primary"
              v-if="formPosition !== groups.length"
              @click="nextStep">
        Next &rsaquo;
      </button>
    </div>
    
  </div>
</template>