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

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

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

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

Ruby on Rails 5

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

Q&A

1回答

669閲覧

railsでvue.jsの単一コンポーネントを使いたい

HiguchiShouya

総合スコア10

Vue.js

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

Ruby on Rails 5

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

0グッド

0クリップ

投稿2019/06/18 08:16

前提・実現したいこと

railsでvue.jsの単一コンポーネントを使いたい

現在以下のようにコードを組んでいるのですが、どうしてもvueファイルで書いたものが反映されません
実現したいこととしましては
・app.vueにて単一コンポーネントを作成
・コンポーネントをhello_vue.jsを通して_header.html.slimに反映させたい

今現状は特にブラウザに変更は見られず、DOMにも存在しておりません

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

またconsoleには以下のようなエラーを吐きます

vue.esm.js:650 [Vue warn]: option "el" can only be used during instance creation with the `new` keyword. [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions. vue.esm.js:650 [Vue warn]: Cannot find element: #pull-right

こちらはapp.vueのscriptタグの中をコメントアウトすると消えるので、その中に問題があるような気がします

該当のソースコード

app.vue

<template> <div id"pull-right"> <li class="is-flex" @mouseover="mouseOver"> <i class="fa fa-tags"></i> <p style="font-weight:bold;"> <a href="">ブランドから探す</a> </p> <ul v-show="active"> <li>シャネル</li> <li>シャネル</li> <li>シャネル</li> <li>シャネル</li> <li>シャネル</li> <li>シャネル</li> </ul> </li> </div> </template> <script> export default { el: '#pull-right', data: { active: false }, methods: { mouseOver: function(){ console.log('event ok'); this.active = !this.active; } } } </script>

hello_vue.js

import Vue from 'vue/dist/vue.esm' import App from './app.vue' import axios from 'axios' var app = new Vue({ el: '#app', components: { 'app': App, } });

_header.html.slim

section.section[style="margin-left: 150px"] .container .columns div[style="width: 155px;"] = image_tag 'logo.svg' .input.column.is-8.mercari-form .button.mercari-button i.fa.fa-search .mercari-list.columns ul.mercari-list-left.column li.is-flex[style="margin: 0 10px;"] i.fa.fa-list p[style="font-weight: bold;"] = link_to 'カテゴリーから探す',"", class:"has-text-black" #app <App></App> .mercari-list-right.column.has-text-centered a.button.is-danger.is-outlined[style="margin: 0 10px;"] | 新規登録 a.button.is-info.is-outlined | ログイン = javascript_pack_tag "hello_vue"

試したこと

= javascript_pack_tag "hello_vue" の読み込む場所を変えて見た
applicarion.html.slimのheadタグにも読み込ませて見ましたが変化なし
=> 実質読み込まれていることに変わりはないが、読み込まれるタイミングに問題があるかもと思い、試したが失敗

とにかくapp.vueのtemplateタグの中のものだけでもDOM上に反映させるのが先だと思い、app.vueのscriptタグの中は一旦コメントアウトして、

hello_vue.js
・app.vueのフォルダの階層を変えてimportが失敗するか試した
=>しっかりコンソールにエラーが吐かれたので、importに問題はないと確信
・以下の記述に問題があるかも?と思い

components: { 'app': App, }
components:{App}

など書き方を試して色々細かく変えて見たが、エラーが見られたり、変化がなかったりで失敗

_header.html.slim

最初idの要素を他のクラスに付随させていただけなので、要素のid単体で以下のようにかいて見た

#app <App></App>

が変化なし

補足情報(FW/ツールのバージョンなど)

railsはもともと書いていたのですが、APIとしてvue.jsを使うのが今回初めてになるので、見当違いのことをしているかもですが、どなたかご教授いただけたら幸いです。
よろしくお願いします

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

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

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

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

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

guest

回答1

0

app.vueのel: #pull-right'を取ってdataを関数でreturnするようにしたら、今のエラーは消えないでしょうか。

app.vue

vue

1<script> 2 export default { 3 // el: '#pull-right', ←削除 4 data(){ 5 return { 6 active: false 7 } 8 }, 9 : 10} 11</script>

一番上のワーニング通り、elnewする時しか使えません。
hello_vue.jsで#appに対してVueを使うぞ!と宣言しているので、その中に入る単一コンポーネントでは領域を宣言する必要はないです。

真ん中のワーニングはdata は関数でなければなりませんを参照してください。

最後のはコンポーネントがレンダリングされるまでテンプレート内のDOMは存在しないのにel:#pull-rightでアクセスしようとして出ているのかなと思いますが…自信ないです。

投稿2019/06/20 00:27

SystemAjisai

総合スコア171

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問