前提・実現したいこと
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を使うのが今回初めてになるので、見当違いのことをしているかもですが、どなたかご教授いただけたら幸いです。
よろしくお願いします
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。