我尝试使用分页来创建一个动态表单。在每个页面上可能有一组复选框或单选按钮。这些是问题的答案选项。一个问题可能有一个或多个答案,因此无线电和复选框。给定的答案必须存储为每个问题的参数值。一切似乎工作正常,只要我只使用收音机或只是复选框。一旦我混合这两者并使用分页,事情就变糟了。我做了一个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">
‹ Previous
</button>
<button
class="btn btn-primary"
v-if="formPosition !== groups.length"
@click="nextStep">
Next ›
</button>
</div>
</div>
</template>
2条答案
按热度按时间bxpogfeg1#
我意识到radio元素和checkbox元素是不一样的,尽管在代码中它只是改变了类型。而且,虽然外观发生了变化,但被启动元素的行为应该并没有改变。所以我修改了这部分代码:
对此:
而现在它的工作和预期一样
ovfsdjhp2#
这是一个React性的问题,输入和它们的约束v模型没有正确更新。因为每个页面都有一个唯一的
formPosition
,所以将其作为key
添加到组件根div应该有助于Vue的React系统了解何时更新。保持所有相同的代码,只更改第一个div: