Boostrap & Laravel: коллапс и v-for - PullRequest
Новая
       4

Boostrap & Laravel: коллапс и v-for

0 голосов
/ 28 августа 2018

Я пытаюсь создать подобное меню, используя 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>
...