我有个递归结构的数据，现在我在从后端获取到数据后，给每个层级的元素都加了一个expand:false，后续想要通过按钮改变元素的折叠状态，但是现在我改成true和false，页面控制的样式没有反应是为什么，怎么解决，请写出具体代码逻辑。我的代码是vue2写的

在Vue2中处理递归数据和折叠状态时，可能是由于组件之间的数据绑定或者是状态管理存在问题。如果你直接修改了数组或对象的`expand`属性，但在视图层上未正确响应，这通常是因为Vuex或者`v-model`没有正确地监听到变化。

首先，确认你的数据结构是否正确传递到了组件中。例如，你可以将数据放在Vuex store或者`props`里：

// 在store.js 或者作为props传递
export default new Vuex.Store({
  state: {
    items: [
      { id: 1, expand: false },
      // ...其他递归数据
    ]
  }
})

// 在组件中接收items
<template>
  <div v-for="(item, index) in $store.state.items" :key="index">
    <Item :item="item" @toggleExpand="toggleExpand(index)" />
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['items']),
  },
  methods: {
    toggleExpand(index) {
      this.$set(this.items, index, { ...this.items[index], expand: !this.items[index].expand });
    }
  }
}
</script>

这里的关键点在于使用`$set`方法而不是简单的赋值，因为普通的赋值不会触发Vue的更新机制。`@toggleExpand`事件则可以绑定到点击按钮的动作，当用户点击时调用相应的方法去改变状态。

如果是在组件内部操作数据并想让视图更新，可以尝试使用`this.$emit('update:items', item)`来通知父组件更新。

检查一下你的CSS是否对`expand`状态的变化有正确的响应规则。确保设置了正确的CSS类名和选择器，比如：

.item.expanded {
  /* 展开的状态样式 */
}

.item.collapsed {
  /* 收缩的状态样式 */
}