Я пытаюсь создать подобное меню, используя v-for.
--- [Collapes1] // Здесь мне нужно использовать v-for для вставки коллапсов 1 и 2
------ [SubCollapes1.1] // Здесь мне нужно использовать v-for для вставки коллапсов 1.1 и 1.2
----------- [Sub SubCollapes 1.1.1] // Здесь мне нужно использовать v-for для вставки коллапсов 1.1.1
------ [SubCollapes1.2]
--- [Collapes2]
------- [SubCollapes2.1]
----------- [SubCollapes2.2]
Мои идентификаторы в моей базе данных аналогичны:
1
1,1
1.1.1
Также у меня есть все мои функции, которые получают отдельно Id 1 & 2 и Ids 1.1 & 1.2 и Ids 1.1.1
Я не смог написать свой код:
<div class="list-group">
<div class="col-md-12">
<div class="col-md-2">Account ID</div>
<div class="col-md-2">Account Name</div>
<div class="col-md-4">Account Budget</div>
<div class=" float-right">
<button class=" btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-eye-open"></span></button>
<button type="submit" class="btn btn-warning " data-toggle="modal" data-target="#exampleModal"><span class="glyphicon glyphicon-plus-sign"></span></button> </div>
</div>
<div class="collapse multi-collapse" id="collapseExample" v-for="account in accounts" >
<div class="list-group-item " >
<div class="col-md-2"> @{{ account.account_id }}</div>
<div class="col-md-2"> @{{ account.account_name }}</div>
<div class="col-md-4"> @{{ account.account_budget }}</div>
<div class=" float-right"><button class="btn btn-success" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2" @click="getSubaccount">
<span class="glyphicon glyphicon-plus-sign"></span></button></div>
<br>
<br>
<div class="list-group">
<div class="collapse multi-collapse" id="collapseExample2" >
<br>
<div class="list-group-item " v-for="account in subaccounts">
<div class="col-md-2"> @{{ account.account_id }}</div>
<div class="col-md-2"> @{{ account.account_name }}</div>
<div class="col-md-4"> @{{ account.account_budget }}</div>
<div class=" float-right"><button class="btn btn-success" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
<span class="glyphicon glyphicon-plus-sign"></span></button></div>
</div>
</div>
</div>
</div>
</div>
</div>