各位大佬好,本人vue小白,请教各位一个问题:
页面上选择选项(radio框)的时候触发change方法 向集合里push数据;但点击下一页再切回第一页 不显示刚刚选的选项;同样的 checkbox就没有问题
图三为切回第一页赋值的代码
各位大佬好,本人vue小白,请教各位一个问题:
页面上选择选项(radio框)的时候触发change方法 向集合里push数据;但点击下一页再切回第一页 不显示刚刚选的选项;同样的 checkbox就没有问题
图三为切回第一页赋值的代码
你这…看着是真的乱…我就不看了
<body>
<div id="app">
<div>
<label v-for="name of radioPages[currentPage].radios" :key="name">
<input type="radio" :checked="name === radioPages[currentPage].selected" @input = "radioPages[currentPage].selected = name">
{{name}}
</label>
</div>
<!-- 翻页按钮 -->
<div>
<button @click="--currentPage" :disabled="currentPage === 0">prev</button>
<button @click="++currentPage" :disabled="currentPage === radioPages.length - 1">next</button>
</div>
<!-- 展示所有页选中相 -->
<div v-for="value,index of record" :key="index">
{{`page ${index} -- ${value}`}}
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
currentPage:0,
radioPages:[
{
selected:'',
radios:[`up`,'down']
},
{
selected:'',
radios:['left','right']
}
],
}
},
computed:{
record(){
return this.radioPages.map(page => page.selected || ‘none’)
}
}
}).mount('#app')
</script>
</body>
实际运行效果是这样的(代码写法是不一样的) 效果预览