Flask + Vue 实现展开一条，其他都关闭的交互效果

要实现展开一条时，其他都关闭的功能，可以在Vue组件中使用一个变量来控制展开与关闭的状态。

首先，在Vue组件的data属性中定义一个变量，用来表示当前展开的条目的索引：

data() {
  return {
    expandedIndex: -1
  }
}

然后，在展开的事件处理方法expandClick中，将被点击条目的索引赋值给expandedIndex，表示该条目被展开：

methods: {
  expandClick(index) {
    this.expandedIndex = index;
  }
}

接下来，在展开条目的HTML元素上绑定点击事件，并根据expandedIndex的值决定是否添加active类，以控制展开与关闭的样式：

<div v-for='(item, index) in items' :key='index'>
  <div @click='expandClick(index)' :class='{ active: expandedIndex === index }'>
    <!-- 展开内容 -->
  </div>
</div>

通过判断expandedIndex与当前条目的索引是否相等，来决定是否添加active类，从而控制展开与关闭的样式。

这样，当展开一条时，其他条目的expandedIndex值不等于当前展开条目的索引，因此不会添加active类，从而实现了展开一条时，其他都关闭的效果。