<template>
<view class="content">
<view class="list-tab">
<view class="list" @tap="switchTab(item.id)" :class="currid === item.id ? 'active' : ''" v-for="item in list" :key="item.id">
<text>{{ item.name }}</text>
</view>
</view>
<view class="panel">
<view class="menu-list-panel" v-for="item in list.filter(obj => obj.id === currid)[0].list" :key="item.id">
<text>{{item.name}}</text>
<view class="edit" @tap="edit(item.id)"><text>修改</text></view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currid: 0,
list: [
{
id: 0,
name: '测试0',
list: [
{
id: 0,
name: "0"
}
]
},
{
id: 1,
name: '测试1',
list: [
{
id: 0,
name: "1"
}
]
}
]
};
},
onLoad() {},
methods: {
switchTab(id){
this.currid = id;
},
edit(id){
console.log(id);
}
}
};
</script>
<style lang="scss">
.content {
display: flex;
align-items: center;
justify-content: center;
.list-tab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 40rpx;
.list{
&.active{
background-color: gold;
}
}
}
}
</style>
以上是测试代码，点击修改后报错：
