vue 递归组件 动态修改样式

问题描述

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

clipboard.png

阅读 3.7k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏