呼び出し元htmlのrecordBtnClick()を押して、timeCard.jsを一度通してからsearchModal.jsのモーダル展開を実行する処理はできているのですが、直接呼び出し先のJSファイルを実行することができません。
Vue.jsにて複数のjsファイルを読み込ませることは可能でしょうか?
該当のソースコード
呼び出し元html <!doctype html> <html xmlns:th="http://www.thymeleaf.org"> <head> </head> ~中略~ <body> <div layout:fragment="content"> <div id="app" class="uk-form-horizontal"> ~中略~ <tr> <th class="uk-vartical-align-middle" style="width: 10vw"> お届け先 <button class="uk-button uk-button-small uk-margin-left aoc_button_search" v-on:click.prevent="recordBtnClick()"><i class="uk-icon-search"></i></button> </th> </tr> ~中略~ <div id="modalSearchModal" th:replace="searchModal"></div> </div> <th:block layout:fragment="javascript"> <script th:inline="javascript"> /*[+ [# th:insert="~{/js/timeCard.js}" /] +]*/ /*[+ [# th:insert="~{/js/searchModal.js}" /] +]*/ </script> </th:block> </body>
呼び出し元js(timeCard.js) const vm = new Vue({ el: '#app', ~中略~ recordBtnClick(item) { vmSearchModal.openSearchModal(); },
呼び出し先html <!doctype html> <html xmlns:th="http://www.thymeleaf.org"> <head> </head> <title>詳細モーダル</title> </head> <body> <div id="modalSearchModal" class="uk-modal"> <div class="uk-modal-dialog uk-modal-dialog-large"> 選択リストを表示 <div class="uk-modal-body uk-scrollable-text" style="height:calc(100vh - 190px)"> <table class="uk-table uk-table-striped uk-table-hover aoc_table2"> <tbody> </tbody> </table> </div> <div class="uk-modal-footer"> <div class="uk-clearfix"> <div class="uk-align-right"> <button class="uk-button aoc_button_update" v-if="!updateModalFlg" v-on:click.prevent=""><i class="uk-icon-check"></i> 保存(F04)</button> <button class="uk-button uk-modal-close aoc_button_foward_back" type="button">閉じる</button> </div> </div> </div> </div> </div> </body> </html>
呼び出し先js(searchModal.js) const vmSearchModal = new Vue({ el: '#modalSearchModal', ~中略~ /*------------------------------ * モーダル起動 *-----------------------------*/ openSearchModal(){ Modal.show('#modalSearchModal'); }, ~中略~ });
補足情報(FW/ツールのバージョンなど)
開発環境 SpringBoot vue.js Uikit
あなたの回答
tips
プレビュー