템플릿의 모달 윈도우

버튼을 누른 후 호출해야하는 모달 블록이 있습니다. 그러나 템플릿 내의 버튼이 페이지를 생성하면 모달 창이 호출되지 않습니다.템플릿의 모달 윈도우

<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 : 모달 스크립트가 VUE 전에 호출 때문에 JQuery와, semanticUI, VUE

출처

2017-03-20 Shakirov Ramil

그것은 mod JS가 vue 인스턴스로 초기화되지 않았기 때문이다. 이것을 'mounted()'hook -'$ ('# addCompanyForm ') 에 넣으려고 노력해야한다. 모달 ({ 분리 : 거짓, onApprove : 함수() { } }) .modal (,, '쇼' '#addBtn'을 '이벤트를 첨부') 을;' –

이해가 모달 스크립트 템플릿 페이지 요소에 대해 알고하지 않습니다. 나는 단지 그것을 vue와 그것의 작업 후에 놓는다.

출처

2017-03-20 14:10:31

템플릿의 모달 윈도우

답변

관련 문제