vue 递归组件 动态修改样式

Question

问题描述

写了一个文件夹目录，递归调用组件写的，想要动态修改其样式，即选中该文件夹就多一个active样式，但是每次点击都会让这个样式出现，而不是我想要达到的只有一个有这个样式。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<div
  class="folder-direction"
  :class="{active:model.id==folderid}"
  @click="toggle(model.id)">
  <div v-if="!isFolder" style="width: 26px"></div>
  <i class="el-icon-minus" v-if="isFolder&&open"></i>
  <i class="el-icon-plus" v-if="isFolder&&!open"></i>
  <img src="../../assets/image/fileicon.png" width="20" height="18" style="margin-right: 20px">
  <span>{{model.folder_name}}</span>
</div>
<ul v-show="open" v-if="isFolder">
  <FolderList
    class="item"
    v-for="(model,index) in model.children"
    :key="index"
    :model="model">
  </FolderList>
</ul>

toggle(id) {
    this.folderid = id
    this.$emit('folderID', id)
    if (this.isFolder) {
      this.open = !this.open
    }
  }

你期待的结果是什么？实际看到的错误信息又是什么？

写了一个文件夹目录，递归调用组件写的，想要动态修改其样式，即选中该文件夹就多一个active样式，但是每次点击都会让这个样式出现，而不是我想要达到的只有一个有这个样式。
没有报错。

Answer 1

在尤大大的例子上改的 ， 加上了choose事件保存当前选中的id：current
https://jsfiddle.net/BoomBang...