🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

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

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

Q&A

解決済

1回答

819閲覧

(rails×vue) 一つの単一コンポーネントファイルに他のコンポーネントファイルを読み込みたい

widget11

総合スコア221

Vue.js

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

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

0グッド

1クリップ

投稿2021/02/07 06:13

前提・実現したいこと

・rails6
・vue.js
・階層
app
-javascript
--packs
|_application.js
|_login.js
--login.vue
--users.vue

login.vueというコンポーネントファイルに、users.vueの内容を表示したいです。
login.vueはlogin.jsで

document.addEventListener('DOMContentLoaded', () => { const login_app = new Vue({ render: h => h(Login) }).$mount() document.body.appendChild(login_app.$el) console.log(login_app) })

のようなファイルを作り、erbで<%= javascript_pack_tag 'log_in' %>という形で表示しております。

発生している問題・エラーメッセージ

users.vueが表示れない。
原因が分からない。前提としてlogin.vueは表示されている。

該当のソースコード

//login.vue <template> <div id="login"> /*中略*/ </div>    <Users></Users><!-- 該当箇所 --> </template> <script> import user from ./users; //該当箇所 /*中略*/ </script> ==================== //users.vue <template> <div id="Users"> users </div> </template> <script> export default { name: "Users" } </script>

具体的な不具合

import User from ./usersの箇所で
vscodeがエラー文言を出しており、expression expectedとusers.vueが読み込まれていない。
また<Users></Users>の箇所もThe template root requires exacrly one elementというエラー文言が出ているため読み込まれない。
ネットに落ちていた情報を見様見真似で書いているのでそもそも、記法が合っているか分からないです。
またこのような方法以外にusers.vueをlogin.vueで表示する方法をご存知でしたら、
ご教示いただけると幸いです。
よろしくお願いします。

その他

users.vueに関しましては、login.jsのようなerbで読み込むためのjsファイルは作成しておりません。

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

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

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

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

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

guest

回答1

0

ベストアンサー

railsの知識は無いため、vueだけの問題であれば以下で解決できると思います。

  • template直下に任意のタグを追加し、全体を囲う

(おそらくインデントが他よりも右にずれていたのでご質問のソースの誤りかと思いますが、念の為m(_ _)m)

  • import文の誤りを修正

→ from以降のパスを引用符で囲う
→ user→Usersに変更

  • componentsの追加

→ script箇所は中略となっていたので、もしかしたら記述されているかもしれませんが念の為

上記の修正で表示できました。(users.vueの変更修正はありません。)

修正後のlogin.vueファイルのソースは以下になります。

vue

1//login.vue 2<template> 3 <div> ← divタグを追加 4 <div id="login"> 5 /*中略*/ 6 </div> 7 <Users></Users> 8 </div> 9</template> 10 11<script> 12import Users from './users'; ← user → Usersに変更 / from以降のパスを引用符で囲う 13 14export default { 15 components: { ← 追加 16 Users 17 } 18}; 19/*中略*/ 20</script>

ご参考になれば幸いです。

投稿2021/02/08 10:26

Twoshi

総合スコア354

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

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

widget11

2021/02/08 18:30

不具合が治りました! componentというオプションが必要だったのですね! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問