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

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

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

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

Ruby on Rails

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

Q&A

解決済

1回答

1258閲覧

Rails, Vue.js で単一ファイルコンポーネントを使用したいときの設定ファイルの書き方

okutamatanuki

総合スコア8

Vue.js

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

Ruby on Rails

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

0グッド

1クリップ

投稿2020/07/24 23:30

何に困っているか

既存のRailsアプリにVue.jsを導入し、単一ファイルコンポーネントで一部のパーツをVue.jsのテンプレートで作成したいと思っています。

何とか動くようにはなったのですが、設定ファイルが非効率な書き方になっているので直したいと思っています。社内にVue.jsの知見のある人がおらず、調べても見つかりませんでしたので、何卒宜しくお願い致します。

前提条件・実行環境

  • Rails 5.2.4.2
  • Vue.js 3.0.1

rails new 時に webpacker は導入していますが、Vue.jsは導入していません。

rails new app_name --skip-coffee --skip-turbolinks --webpack

Vue.js は後から./bin/rails webpacker:install:vueで導入しています。

作成したファイル

レイアウトファイルに以下のコードを記述しています。

Ruby

1# vews/layout/application.thml.haml 2= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

コンポーネントはこのような形でviewに埋め込んでいます。(今回はトップに戻るボタンのコンポーネントなので、scroll_top_btn.vueというファイルを作成しています。)

Ruby

1# viewファイル 2%scroll-top-btn

.vueのテンプレートファイルは、一度hello_vue.jsにまとめて、application.jsに読み込んでいます。

js

1// javascript/packs/hello_vue.js 2 3import Vue from 'vue/dist/vue.esm' 4import ScrollTopBtn from '../components/scroll_top_btn.vue' 5 6document.addEventListener('DOMContentLoaded', () => { 7 new Vue({ 8 el: 'scroll-top-btn', 9 components: { ScrollTopBtn } 10 }) 11})

js

1// javascript/packs/application.js 2import './hello_vue.js'

問題点

悩んでいるのは、このhello_vue.jsの記載方法で、

js

1// javascript/packs/hello_vue.js 2document.addEventListener('DOMContentLoaded', () => { 3 new Vue({ 4 el: 'scroll-top-btn', 5 components: { ScrollTopBtn } 6 }) 7})

この書き方だと、コンポーネントが増えるたびに都度new Vue()hello_vue.js内に記載しないといけなくなってしまいます。何とか、もっとスマートに描く方法はありませんでしょうか?

ちなみに、単一ファイルコンポーネント内はこのようになっております。

vue

1// javascript/componemts/scroll_top_btn.vue 2<template> 3 <div class="scroll-top-btn"> 4 <img 5 src="/img/btn_img.svg" 6 @click="scrollTop" /> 7 </div> 8</template> 9 10<script defer> 11 export default { 12 methods: { 13 scrollTop: function() { 14 // 処理 15 } 16 } 17 } 18</script>

どうぞよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

自己解決

まだすっきりしないところがありますが、これで一段落させることにしました。
これなら、コンポーネントが増えても一行増えるだけ&&複数のコンポーネントも動作したので…。

これからも、研究・精進いたします。

Haml

1# viewファイル 2%scroll-top-btn.vue-component  #← こんな感じのクラス名を各コンポーネントにつける

JS

1// javascript/packs/hello_vue.js 2 3import Vue from 'vue/dist/vue.esm' 4import ScrollTopBtn from '../components/scroll_top_btn.vue' 5 6Vue.component('ScrollTopBtn', ScrollTopBtn); 7 8document.addEventListener('DOMContentLoaded', () => { 9 document.querySelectorAll('.vue-component').forEach((el) => { 10 new Vue({ el: el }); 11 }); 12})

投稿2020/07/30 13:34

okutamatanuki

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問