Основание модальное closeOnClick closeOnEsc не работает

Question

Я использую vue и foundation 6.2.3 для создания модала:

<div :id="modalId" class="reveal" data-reveal v-foundation-element aria-labelledby="modal button" aria-hidden="true"
     role="dialog" :data-options="allowEscape ? 'closeOnClick:true;closeOnEsc:true;' : 'closeOnClick:false;closeOnEsc:false;'">

Когда я нажимаю кнопку, появляется модал, но я могу щелкнуть вне модального тела и нажать клавишу выхода, чтобы закрытьнесмотря на то, что closeOnClick:false и closeOnEsc:false установлены.

Вот поворот: я использую горячую перезагрузку с веб-пакетом, и я могу сделать странную вещь, чтобы он начал работать.

1. Я удаляю v-foundation-element из div
2. Я сохраняю и перезагружаю страницу.
3. Я добавляю v-foundation-element обратно в div
4. страница перегревается
5. Я больше не могу кликать / выходить из модала

вот HTML-код для модала, когда он находится в рабочем состоянии:

<div id="choose-your-package" data-reveal="ianmsm-reveal" aria-labelledby="Choose Your Package" aria-hidden="false" role="dialog" data-options="closeOnClick:false;closeOnEsc:false;" class="reveal" data-yeti-box="choose-your-package" data-resize="choose-your-package" tabindex="-1" style="display: block; top: 129px;">

иВот модал в нерабочем состоянии:

<div id="choose-your-package" data-reveal="axb8cp-reveal" aria-labelledby="Choose Your Package" aria-hidden="false" role="dialog" data-options="closeOnClick:false;closeOnEsc:false;" class="reveal" data-yeti-box="choose-your-package" data-resize="choose-your-package" data-events="resize" style="top: 129px; display: block;" tabindex="-1">

Я не уверен, почему это происходит.Как мне заставить это работать последовательно?

Answer 1

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

Попробуйте установить data-close-on-esc="false" и data-close-on-click= "false".Возможно, у вашего плагина есть опции JS, разрешенные в настройках данных, но я сомневаюсь в этом.