###前提・実現したいこと
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
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/27 01:58
2017/08/27 08:08
2017/08/27 13:37
2017/08/27 14:11