railsでVue.jsが使えない！cdn

Question

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
            }
        });

    })();

これだとうまくいかない、どうしてでしょうか。
javascriptでもエラーが出ているわけではない。

Answer 1

webpackerというgemを使ってvueを使う方法

このgemでは、コンパイルや分割されたファイルの統合的な読込みができます。

vueというライブラリを使用するだけであれば仰る方法で問題ありません。

実装する際に、

• 機能毎にファイルを分割して、ページ毎に読み込むファイルを変えたい
• ES6でjavascriptを書きたい
• .vue ファイルにてvueを書きたい

というような要望がある場合に、webpackerを使用すると良いかと思います。

---

ソースの状況ですが、まず、
{{ tocs }} という文字がそのまま表示されてしまう
というのは、
Vueによるコンテンツの置き換えが走っていない。
という状況です。

つまり、Vueそのものが稼働していません。

チェックポイントとしては、

• Vueが正しくnewできているか
• エレメントの指定が正しく行われているか

という点でしょうか。

検証方法は、

• Chromeの検証->コンソールで、`new Vue({el: '.menu'}) と実行してみる
• Vueの中で、created要素を作成し、console.logしてみる

とかでしょうか。

Vueが正しく動いていれば、 {{ tocs }} の部分が置換されたりエラーになったりするはずです。

ちなみに、

v-for='toc in tocs'
の中で表示するのであれば、
{{ toc }}
の方がやりたいことに近いと思うのですがいかがでしょうか？

Comments

[dddddsatoki]

ありがとうございます！
上記の方法色々やってみたのですが、ヘッダー部分に　class='menu'を使っていました。
vueの取得部分をidに変更したら成功しました！