https://qiita.com/jnchito/items/30ab14ebf29b945559f6
この記事のようにwebpackerというgemを使ってvueを使う方法があるようですが、
//application.html.erb <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script>
これをはるのじゃダメなのでしょうか。
実際これで、new.html.erb に下のコードは使えた
<%= form_for(@post) do |f| %> <div id='editor'> <div class="col-md-6"> <textarea name="post[content]" class="form-control" rows="20" v-model='input' debounce='50'></textarea> </div> <div class="col-md-6 box"> <div v-html='input | marked' class="box"></div> </div> </div> <%= f.submit %> <% end %> <script type="text/javascript"> window.onload = function() { new Vue({ el: '#editor', data: { input: '<%== j @post.content %>', }, filters: { marked: marked, }, }); }; </script>
できないことが起きた。
自動で目次を生成したいのだが、
<div class="menu col-md-4"> <li v-for='toc in tocs'> <span>{{ tocs }}</span> </li> </div> <div class="col-md-8 box"> <%= qiita_markdown(@post.content) %> </div> <script type="text/javascript"> (function() { var titles = document.getElementsByTagName('h1'); var titleTextArray = []; var title; for (var i=0; i<titles.length; i += 1) { title = titles[i]; titleTextArray.push({ title: title.hasAttribute('alt-title') ? title.getAttribute('alt-title') : title.innerText, href: title.id }); } var vm = new Vue({ el: '.menu', data: { tocs: titleTextArray } }); })();
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/14 05:16