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

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

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

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

Ruby on Rails

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

Q&A

解決済

2回答

617閲覧

助けてください!railsにvue.jsの導入がうまくいきません。

ryoma510

総合スコア29

Vue.js

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

Ruby on Rails

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

0グッド

0クリップ

投稿2017/08/26 08:21

編集2017/08/26 08:23

###前提・実現したいこと
http://qiita.com/jnchito/items/30ab14ebf29b945559f6

こちらのサイトで解説されているものを作ろうとしています。

ちょっとしたアドバイスやここが怪しい!と言った指摘、これを試してみたら?

と言ったコメントでも構いませんのでお力添えいただけると幸いです。

###発生している問題・エラーメッセージ
こちらのサイトで解説されている通り、進めて

Hello Vue!

と画面に出力されるところまではできたのでrailsでvueを動かすというところまではできています。
しかしもう少し進んだところの

Vue.jsサンプルアプリケーションの作成

http://jsfiddle.net/yyx990803/23qze30k/
このようなサンプルアプリケーションを作る時に指示通りにコピペしてもうまくいきません

具体的にはinput formだけが見えている状態になるので

イメージ説明

ここだけが表示されて

(app/views/home/index.html.erbの一部) <demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery"> </demo-grid>

に該当する箇所が読み込めていないようです。

###該当のソースコード

html

1(app/views/home/index.html.erb) 2 3<!-- component template --> 4<script type="text/x-template" id="grid-template"> 5 <table> 6 <thead> 7 <tr> 8 <th v-for="key in columns" 9 @click="sortBy(key)" 10 :class="{ active: sortKey == key }"> 11 {{ key | capitalize }} 12 <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"> 13 </span> 14 </th> 15 </tr> 16 </thead> 17 <tbody> 18 <tr v-for="entry in filteredData"> 19 <td v-for="key in columns"> 20 {{entry[key]}} 21 </td> 22 </tr> 23 </tbody> 24 </table> 25</script> 26 27<!-- demo root element --> 28<div id="demo"> 29 <form id="search"> 30 Search <input name="query" v-model="searchQuery"> 31 </form> 32 <demo-grid 33 :data="gridData" 34 :columns="gridColumns" 35 :filter-key="searchQuery"> 36 </demo-grid> 37</div>

javascript

1(app/assets/stylesheets/home.scss) 2 3import Vue from 'vue' 4import App from './app.vue' 5 6// register the grid component 7Vue.component('demo-grid', { 8 template: '#grid-template', 9 replace: true, 10 props: { 11 data: Array, 12 columns: Array, 13 filterKey: String 14 }, 15 data: function () { 16 var sortOrders = {} 17 this.columns.forEach(function (key) { 18 sortOrders[key] = 1 19 }) 20 return { 21 sortKey: '', 22 sortOrders: sortOrders 23 } 24 }, 25 computed: { 26 filteredData: function () { 27 var sortKey = this.sortKey 28 var filterKey = this.filterKey && this.filterKey.toLowerCase() 29 var order = this.sortOrders[sortKey] || 1 30 var data = this.data 31 if (filterKey) { 32 data = data.filter(function (row) { 33 return Object.keys(row).some(function (key) { 34 return String(row[key]).toLowerCase().indexOf(filterKey) > -1 35 }) 36 }) 37 } 38 if (sortKey) { 39 data = data.slice().sort(function (a, b) { 40 a = a[sortKey] 41 b = b[sortKey] 42 return (a === b ? 0 : a > b ? 1 : -1) * order 43 }) 44 } 45 return data 46 } 47 }, 48 filters: { 49 capitalize: function (str) { 50 return str.charAt(0).toUpperCase() + str.slice(1) 51 } 52 }, 53 methods: { 54 sortBy: function (key) { 55 this.sortKey = key 56 this.sortOrders[key] = this.sortOrders[key] * -1 57 } 58 } 59}) 60 61// bootstrap the demo 62var demo = new Vue({ 63 el: '#demo', 64 data: { 65 searchQuery: '', 66 gridColumns: ['name', 'power'], 67 gridData: [ 68 { name: 'Chuck Norris', power: Infinity }, 69 { name: 'Bruce Lee', power: 9000 }, 70 { name: 'Jackie Chan', power: 7000 }, 71 { name: 'Jet Li', power: 8000 } 72 ] 73 } 74})

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

rails 5.1.3
ruby 2.3.1
yarn 0.27.5
yarn vue 0.27.5

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

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

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

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

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

guest

回答2

0

初めまして、私も「Rails 5.1で作るVue.js・・・」の記事参考に環境作ったことありますが、問題なく動いてました。

1点おうかがいしたいのですが、js側でエラーになってる感じですが、デベロッパーツールのコンソールに何か出力されてないですか?

投稿2017/08/26 13:57

debucchi

総合スコア12

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

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

hypermkt

2017/08/27 01:58

私もちょうどRails 5.1 + Vue.jsの環境を構築し開発をすすめている段階です。同じくコンソールに出力されている内容が気になります。
ryoma510

2017/08/27 08:08

お二方ともコメントありがとうございます。 コンソールを確認したところ ``` You are using the runtime-only build of Vue where the template compiler is not available ``` と出ていたので、 http://qiita.com/magaya0403/items/3fbe9aa20c6a66b76662 こちらのサイトを参考にしてwebpackerのエイリアスを設定したところうまくいきました
hypermkt

2017/08/27 13:37

自分も全く同じ対応をしました! それで問題ないと思います。
debucchi

2017/08/27 14:11

私も同じところ、修正したの思い出しました。 うまくいって何よりです。
guest

0

ベストアンサー

私も同じような現象になったことがあります。
正しい解決方法かはわかりませんが、試しにwebpacker.ymlの

webpacker.yml dev_server: host: 0.0.0.0 port: 3000 https: false

に変更してみてください。

私はこれで表示できるようになりました。ただし、これが正しい解決法かは、分かりません。

投稿2017/08/26 09:18

Yuinyan

総合スコア312

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

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

ryoma510

2017/08/26 09:30

試してみたところうまくいきませんでした・・ ありがとうございました!
Yuinyan

2017/08/26 13:41

言わずもがなですが、 bin/webpack は、やっていますよね?
ryoma510

2017/08/26 13:43

やっています。 vue.js自体が動くこと自体は確認できているのですが・・
Yuinyan

2017/08/26 13:44

はい、jsを変更したら必ずコンパイルが必要なので、一度やってみJSを編集したら実施です。念のためでした。
ryoma510

2017/08/26 14:37

わざわざありがとうございます! 解決できたらまたここで共有しますね!
ryoma510

2017/08/27 08:10

Yuriyanさん。コメントありがとうございました。 コンソールで出ていたエラー You are using the runtime-only build of Vue where the template compiler is not available で探したところ http://qiita.com/magaya0403/items/3fbe9aa20c6a66b76662 こちらの記事が出てきたので、webpackerのエイリアスを指定してうまくいきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問