vue 遞歸組件 動(dòng)態(tài)修改樣式

問題描述

寫了一個(gè)文件夾目錄，遞歸調(diào)用組件寫的，想要?jiǎng)討B(tài)修改其樣式，即選中該文件夾就多一個(gè)active樣式，但是每次點(diǎn)擊都會(huì)讓這個(gè)樣式出現(xiàn)，而不是我想要達(dá)到的只有一個(gè)有這個(gè)樣式。

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）

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

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

寫了一個(gè)文件夾目錄，遞歸調(diào)用組件寫的，想要?jiǎng)討B(tài)修改其樣式，即選中該文件夾就多一個(gè)active樣式，但是每次點(diǎn)擊都會(huì)讓這個(gè)樣式出現(xiàn)，而不是我想要達(dá)到的只有一個(gè)有這個(gè)樣式。
沒有報(bào)錯(cuò)。