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.