Vue v-for с выпадающими меню Bulma - PullRequest
Новая
       24

Vue v-for с выпадающими меню Bulma

0 голосов
/ 27 июня 2019

У меня есть проект, использующий vue-cli + Bulma в качестве CSS-фреймворка 

                 <div v-for="(input, index) in menuInputs" class="input-wrapper-items">
                        <div class="field custom-control">
                            <label class="label">{{input.label}} # {{index + 1}}</label>
                            <!--<div class="control">-->
                                <!--<input name="itemName" class="input" type="text" placeholder="Item Name">-->
                            <!--</div>-->
                            <div class="dropdown">
                                <div class="dropdown-trigger">
                                    <button class="button" v-on:click="magic()" aria-haspopup="true" aria-controls="dropdown-menu">
                                        <span>First word</span>
                                    </button>
                                </div>
                                <div class="dropdown-menu" v-bind:id="input.ID+1" role="menu">
                                    <div class="dropdown-content">
                                        <p class="dropdown-item" v-for="option in soundOptions">
                                            {{option}}
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="dropdown">
                                <div class="dropdown-trigger">
                                    <button class="button" v-on:click="magic()" aria-haspopup="true" aria-controls="dropdown-menu2">
                                        <span>Second word</span>

                                        <!--<span class="icon is-small">-->
                                        <!--&lt;!&ndash;fontawesome required for the icon&ndash;&gt;-->
                                        <!--<i class="fa fa-angle-down" aria-hidden="true"></i>-->
                                        <!--</span>-->
                                    </button>
                                </div>
                                <div class="dropdown-menu2" v-bind:id="input.ID+2" role="menu">
                                    <div class="dropdown-content">
                                        <p class="dropdown-item" v-for="option in soundOptions">
                                            {{option}}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

У меня есть главный v-for цикл в верхней части, который будет генерировать серию из двух параллельных выпаденийвыпадающие меню.

Проблема связана с каждой каплей down-trigger с правильным меню drop-down, с которым она связана.

Я не уверен, что можно увеличить, чтобы дать каждомутриггер / меню соединяют свои собственные уникальные идентификаторы, чтобы они могли быть независимо связаны.

...