在我的应用程序中,我有文件夹列表,每个文件夹包含一些文件。选择特定文件夹时,我必须显示这些文件。这些文件夹将位于左侧。选择该文件夹时,文件将列在右侧。
我的json是这样的:
folders : [
{id: 0, name: 'Animals', files:['cat.jpg','dog.jpg']},
{id: 1, name: 'Birds',files:['crow.jpg','sparrow.jpg']},
{id: 2, name: 'Area',files:['desert.jpg','river.jpg']}
]
因此,如果我选择“动物”文件夹,则右侧将列出两个文件。
像这些 :
我是vuejs的新手。我怎样才能做到这一点?
您可以在左侧列出文件夹,在右侧列出一个变量files
,这些变量每次都会被单击的文件夹更新:
new Vue({
el: '#app',
data(){
return{
folders : [
{id: 0, name: 'Animals', files:['cat.jpg','dog.jpg']},
{id: 1, name: 'Birds',files:['crow.jpg','sparrow.jpg']},
{id: 2, name: 'Area',files:['desert.jpg','river.jpg']}
],
files: []
}
},
methods:{
showFiles(id){
let f = (this.folders).filter(f=>{return f.id==id})[0];
this.files = f.files;
}
}
});
.folders {
float: left;
width: 50%;
}
.files {
margin-left: 50%;
}
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
<div class="folders">
<ul>
<li v-for="(folder,index) in folders" :key="index">
<a @click="showFiles(folder.id)">{{folder.name}}</a>
</li>
</ul>
</div>
<div class="files">
<ul>
<li v-for="(file,index) in files" :key="index">
{{file}}
</li>
</ul>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句