Vue recursive components dynamically modify styles

problem description

wrote a folder directory, written by recursive calling components, want to dynamically change its style, that is, select the folder will have one more active style, but each click will make this style appear, rather than I want to achieve only one has this style.

related codes

/ / Please paste the code text below (do not replace the code with pictures)

<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
    }
  }

what result do you expect? What is the error message actually seen?

wrote a folder directory, written by recursive calling components, want to dynamically change its style, that is, select the folder will have one more active style, but each click will make this style appear, rather than I want to achieve only one has this style.
No error was reported.

clipboard.png

Apr.02,2021

modified on Youda's example, added the choose event to save the currently selected id:current
https://jsfiddle.net/BoomBang.

.
Menu