Javascript 使用vuejs在容器右侧列出文件夹的所有文件

在我的应用程序中，我有文件夹列表，每个文件夹都包含一些文件。我必须在选择特定文件夹时显示这些文件。这些文件夹将在左侧。选择该文件夹时，文件将在右侧列出

我的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的新手。如何实现这一点？

您可以在左侧列出文件夹，在右侧列出一个变量

文件

，该变量将由每次单击的文件夹更新：

newvue({
el:“#应用程序”，
数据（）{
返回{
文件夹：[
{id:0，名称：'Animals'，文件：['cat.jpg'，'dog.jpg']}，
{id:1，名称：'Birds'，文件：['crow.jpg'，'sparrow.jpg']}，
{id:2，名称：'Area'，文件：['desert.jpg'，'river.jpg']}
],
文件：[]
}
},
方法：{
显示文件（id）{
设f=（this.folders）.filter（f=>{return f.id==id}）[0]；
this.files=f.files；
}
}
});
.folders{
浮动：左；
宽度：50%；
}
.档案{
左边距：50%；
}


文件夹中的（文件夹、索引）：key=“index”>
{{folder.name}




{{file}}


Hi Majed。。。我需要帮助。同样的事情上面，我必须做的treeview。其中某个文件夹的子节点上有文件。我必须像你之前建议的那样显示这些文件，以便正常查看。我为此又提出了一个问题。。