uniapp给循环列表点击toggle class类名切换，并toggle 显示隐藏

<view class="help_dl" v-for="(item, index) in list" :key="index" :class="item.isVisible ? 'on' : ''">
    <view class="help_dt" @click="toggleItem(index)">Q：{{item.title}}<text></text></view>
    <view class="help_dd" v-if="item.isVisible">A：{{item.txt}}</view>
</view>

<script>
	export default {
		data() {
			return {
				list: [
					{ isVisible: true, title: '文章标题文章标题文章标题', txt: '解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答' },
					{ isVisible: false, title: '文章标题文章标题文章标题', txt: '解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答' },
					{ isVisible: false, title: '文章标题文章标题文章标题', txt: '解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答解答' },
				],
				
			}
		},
		methods: {
			toggleItem(index) {
			    const item = this.list[index];
			    this.list[index].isVisible = !item.isVisible;
			}
			
		}
	}
</script>

<style>
page{background: #F3F2F7;}
.help_dl{width: 100%; overflow: hidden; background: #fff; border-radius: 10rpx; margin-bottom: 20rpx; padding: 0 28rpx; box-sizing: border-box; line-height: 48rpx;}
.help_dt{font-size: 30rpx; padding: 20rpx 0; padding-right: 40rpx; position: relative;}
.help_dd{font-size: 28rpx; color: #666; padding: 20rpx 0; border-top: 2rpx #eee solid;}
.help_dt text{display: block; position: absolute; top: 26rpx; right: 0; background: #D9D9D9; width: 38rpx; height: 38rpx; border-radius: 38rpx;}
.help_dt text::after, .help_dt text::before{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff;}
.help_dt text::after{width: 20rpx; height: 2rpx;}
.help_dt text::before{width: 2rpx; height: 20rpx;}
.help_dl.on .help_dt text{background: none;}
.help_dl.on .help_dt text::after{ background: #BFBFBF;}

</style>