https://teratail.com/questions/321024
以前こちらのような質問をしていて、端的な概要は、他のコンポーネント(users.vue)を親コンポーネント(login.vue)の中で読み取り表示したいというものでした。
しかしエディタがはいていたエラーはなくなったのですが、実際railsサーバーを立ち上げ開発者ツールを開くと
Uncaught Error: Cannot find module './Users'
とUsers moduleが読み込まれないというエラーが出ていてlogin.vue(中略していますがただのフォームが中身です)の内容がそもそも表示されない状態です。
/* app/javascript/login.vue */ <template> <div> <div id="login"> <!-- 中略 --> </div> <Users></Users> </div> </template> <script> import Users from './Users'; /* このusersが読み込まれていない。 */ export default{ data: function() { return{ /*中略*/ } }, components: { Users, }, methods: { /*中略*/ } } </script>
/* app/javascript/users.vue */ <template> <div id="Users"> users </div> </template> <script> export default { name: "Users", } </script>
Usersという名前でusers.vueの内容をコンポーネント化し、
import Users from './Users';
でusersのコンポーネントをlogin.vueで読み込み、
componentsオプションで子コンポーネントとして定義し、Usersタグで表示という形をとっておりますが、
同じディレクトリ(javascript)内にあるので相対パスの記法は間違ってないと思うのですが、
何か記載に過不足があったりする形でエラーが出ているのでしょうか?
例えばlogin.vueは、login.jsというものをjavascript/packs配下に作成し
const login_app = new Vue({ render: h => h(Login) }).$mount()
のような記載をしているのですが、user.vueはそのようなことをしていないです。
なぜ表示されないのか全く掴めず、大変恐縮ですがご回答いただけると幸いです。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー