Vue v-for与Bulma下拉菜单

Question

我有一个使用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菜单相关联。

我不确定我可以增加多少以便为每个触发器/菜单对分配自己的唯一ID，以使它们独立关联。