模板中的模态窗口答案

【问题标题】：Modal window in template模板中的模态窗口
【发布时间】：2017-08-11 16:19:52
【问题描述】：

我有一个模态块，必须在按下按钮后调用。但是如果模板里面的按钮生成页面，模态窗口就不会被调用。

    <script type="x-template" id="company-template">
<button class="ui button primary" id="addBtn">Add Form</button>
<!-- it's doesn't work on the rendered page-->
    </script>

如果我将按钮放在模板之外，就在页面中。它会起作用的。

    <!-- Modal Forms-->
    <div class="ui small modal" id="addCompanyForm">
        <div class="header">Добавить</div>
        <div class="content ui form">
            <div class="field">
                <label>Компания:</label>
                <input type="text" name="companyname" placeholder="название компании">
            </div>
            <div class="field">
                <label>ИНН:</label>
                <input type="text" name="inn" placeholder="ИНН компании">
            </div>
        </div>
        <div class="actions">
            <button class="ui cancel button">Закрыть</button>
            <button class="ui approve button">Сохранить</button>
        </div>
    </div>

<script>
$('#addCompanyForm')
    .modal({
        detachable: false,
        onApprove : function() {

        }
    })
    .modal('attach events', '#addBtn', 'show')
;
</script>

LIBS： jquery、semanticUI、vue

【问题讨论】：

这是因为modal JS没有初始化到vue实例中。试着把这个放到mounted()钩子里-$('#addCompanyForm') .modal({ detachable: false, onApprove : function() { } }) .modal('attach events', '#addBtn', 'show') ;

标签： javascript jquery templates vue.js semantic-ui

【解决方案1】：

我了解，模态脚本不知道模板页面元素，因为模态脚本在 vue 之前调用。我只是把它放在vue之后就可以了

【讨论】：