質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

605閲覧

vueコンポーネントについて

ransuS_T

総合スコア106

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/12/26 11:33

Vueのmethodsをすべての画面共通で使う処理と
画面でしか使用しない、または処理を変更するものとに分けて記述したいと思い
以下の記述を試したところ、画面共通部分に記述したmethodsは読み込まれるのですが
各画面ごとに記述したmethodsは無視されてしまいました。
(実際に各画面で読み込んでいる処理を共通部分に移動させたところエラーを消えたのを確認しております)

各部品の読み込みはtymeleafを使用して行おうと考えております。

画面共通部分

html

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org" th:fragment="meta_body(title,body,link,script)"> 3 <head th:replace="common/header :: meta_header(${title},~{::link},~{::script})"> 4 </head> 5 <body> 6 <div id="app"> 7 8 <!-- 各ページ本体 --> 9 <div class="content"> 10 <div th:replace="${body}"></div> 11 </div> 12 13 </div> 14 </body> 15 <script type="application/javascript" th:inline="javascript"> 16 /*<![CDATA[*/ 17 let bodyFunc = new Vue({ 18 el: '#app', 19 data: { 20 // 割愛 21 }, 22 methods: { 23 // 共通で使いたい処理を記述 24 } 25 }) 26 /*]]>*/ 27 </script> 28</html>

各画面のうちの一つ

html

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org" th:replace="common/template :: meta_body('main',~{::body/content()},~{::link},~{::script})"> 3 <body> 4 <template> 5 <el-form></el-form> 6 <div th:replace="components/tableComponent :: meta_table(null,true,true,true)"> 7 </div> 8 </template> 9 <script type="application/javascript"> 10 /*<![CDATA[*/ 11 new Vue({ 12 // 各画面ごとの固有の処理 13 methods: { 14 createData() { 15 16 }, 17 detailData() { 18 19 }, 20 deleteData() { 21 22 } 23 } 24 }) 25 /*]]>*/ 26 </script> 27 </body> 28</html>

実際に記述したメソッドを使用している部品

html

1<div th:fragment="meta_table(tableData, createFlg, editFlg, deleteFlg)"> 2 <div class="tableButtonArea"> 3 <el-button th:v-show="${createFlg}" @click="createData">新規登録</el-button> 4 <el-button th:v-show="${editFlg}" @click="detailData">編集・詳細</el-button> 5 <el-button th:v-show="${deleteFlg}" @click="deleteData">削除</el-button> 6 </div> 7</div>

実際に表示されたエラー内容
![イメージ説明

原因は共通化したVueと各画面ごとに呼ばれるVueのインスタンスがあり
各画面で呼ばれているインスタンスは適応する要素を記述していないため
methodsで記述した内容が反映されていないように見えていると憶測しておりますが
適応する要素を記述してしまうと以下のエラーが発生してしまします。

エラー内容
vue.js:5704 Uncaught RangeError: Maximum call stack size exceeded

上記のエラーはすでにインスタンス化した要素内にある子要素をインスタンス化の対象として
選択したために二重のインスタンス化ができないため発生しているものと思われます。

こちらもし解決方法がわかる方いましたらご教授をお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問