现象:转换a和b时,下面的数据类别没有渲染成选中的状态
代码:
<template> <div class="content"> <div class='slt-btn'> <div class="content-nav"> <h3 class="mt10 mr20">选择业务:</h3> <RadioGroup v-model="bbbbbbbbb" type="button" @on-change="change"> <Radio v-for="(item,index) in bbb" :key='index' :label="item.id">{{item.name}}</Radio> </RadioGroup> </div> </div> <div class='slt-btn'> <div v-if="!itype"> <h3 class='fl mr20 mt10'>数据类别:</h3> <RadioGroup v-model="ccccccccc" type="button" @on-change='aaaaChange'> <Radio v-for="(item,index) in nav" :key='index' :label="item.id">{{item.name}}</Radio> </RadioGroup> </div> <div v-if="itype"> <h3 class='fl mr20 mt10'>数据类别:</h3> <RadioGroup v-model="aaaaaaaaaaa" type="button" @on-change='bbbbChange'> <Radio v-for="(item,index) in nav1" :key='index' :label="item.id">{{item.name}}</Radio> </RadioGroup> </div> </div> </div> </template> <script> export default { name: "test", props: {}, components: {}, data() { return { itype: false, bbbbbbbbb: 0, ccccccccc: 1, aaaaaaaaaaa: 4, bbb: [ { id: 0, name: 'aaaaaaaaaaaa' }, { id: 1, name: 'bbbbbbbbbbbbb' } ], currentObj: { id: 1, name: 'CPM展示数', color: { item: 'rgba(92,184,92,1)', line: 'rgba(92,184,92,0.7)' } }, nav1: [ { id: 4, name: 'bb:ggggggggg', color: { item: 'rgba(92,184,92,1)', line: 'rgba(92,184,92,0.7)' } }, { id: 5, name: 'bb:hhhhhhhhhhh', color: { item: 'rgba(255,153,0,1)', line: 'rgba(255,153,0,0.7)' } }, ], nav: [ { id: 1, name: 'aaaaaaaaa:ddddddddd', color: { item: 'rgba(92,184,92,1)', line: 'rgba(92,184,92,0.7)' } }, { id: 2, name: 'aaaaaaaaa:eeeeeeeeee', color: { item: 'rgba(255,153,0,1)', line: 'rgba(255,153,0,0.7)' } }, { id: 3, name: 'aaaaaaaaa:fffffffff', color: { item: 'rgba(255,65,0,1)', line: 'rgba(255,65,0,0.7)' } } ], }; }, methods: { change() { if (this.bbbbbbbbb == 0) { this.itype = false; } else { this.itype = true; } }, aaaaChange() { for (let item of this.nav) { if (item.id == this.ccccccccc) { this.currentObj = item; break; } } console.log("aaaaChange|",this.currentObj); }, bbbbChange() { for (let item of this.nav1) { if (item.id == this.aaaaaaaaaaa) { this.currentObj = item; break; } } console.log("bbbbChange|",this.currentObj); }, }, }; </script> <style scoped lang="scss"> #chart { background-color: #fff } .content { padding-bottom: 100px; } .table-top { border-top: #ddd dashed 1px; padding-top: 15px; margin: 20px 0; display: flex; flex-direction: row; justify-content: space-between; } .slt-btn { display: flex; justify-content: space-between; margin-bottom: 20px; } .content-nav { display: flex; padding: 0px; margin-bottom: 0px; background: #f5f6f8; } .content-nav:after { content: ""; clear: both; display: block; } .content-nav ul { border: 1px solid #ccd5dc; overflow: hidden; margin: 0; padding: 0; display: block; width: 100%; float: left; } .content-nav ul li { cursor: pointer; text-align: center; padding: 8px 26px; font-size: 12px; border-right: 1px solid #ccd5dc; display: inline-block; } .content-nav ul li:last-child { border-right: 0; } .content-nav ul li.choose { background: #74859f; color: #fff; } </style>将代码中的v-if改成v-show后正常
结果: