Модал VueJS Bulma Sweet всегда переключается на верх страницы внутри цикла For - PullRequest
Новая
       7

Модал VueJS Bulma Sweet всегда переключается на верх страницы внутри цикла For

0 голосов
/ 15 сентября 2018

Я использую Vue JS и Bulma Frameworks. Чтобы показать модал я использую. У меня есть список пунктов (10), который отображается в цикле For. В каждом предмете у меня есть кнопка, которая открывает сладкий модал. Независимо от того, какую кнопку я нажимаю, модал всегда отображается вверху страницы. Может кто-нибудь помочь мне, как показать модал рядом с нажатой кнопкой?

Шаблон index.html 

        <div class="content column is-full-mobile no-devices-found-wraper">
        <div class="columns is-mobile">
            <div class="column is-full-mobile ">
                <div class="columns is-mobile is-marginless">
                    <div class="column  is-half-mobile padding-bottom- 
                        zero padding-top-3">mobile devices:</div>
                    <div class="column padding-bottom-zero padding-top-3">
                        <a @click.stop.prevent="openDeviceModal()" 
                            class="add_icon is-pulled-right add-location-btn level- 
                            item">
                            <i class="fa fa-plus"></i>ADD ITEMS
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Сладко-модальное снаружи для петли 

        <sweet-modal class="Add mobile device" ref="deviceAddLocation" 
        von:close="closeModal">
        <form @submit.prevent="saveDeviceToLocation">
            <div class="field add-devices-height-with-error">
                <label class="label" >mobile device Name</label>
            </div>
        </form>
    </sweet-modal>

// index.vue-- openDeviceModal () // 

    openDeviceModal() {
            this.isModalOpen = true;
            this.$refs.deviceAddLocation.blocking = true;
            this.$refs.deviceAddLocation.open();
        }

// CSS // 

    .isModalOpen {
    height: 100vh;
    overflow: hidden;
    }

    .sweet-modal {
        overflow: inherit;
    }

    .sweet-modal-overlay {
        background: transparent !important;
        height: 100% !important;
    }
    .sweet-modal .sweet-content {
        padding-top: 10px;
        }

        .sweet-modal.is-visible {
        transform: translate(-62%, -50%) !important
        }


        sweet-modal .sweet-box-actions {
        top: 15px !important;
        }
...