【Vue.js】サンプルアプリケーションまず最初で躓く

先に進まない

１ページずつきちんと読んで手を動かしてが今回の課題。

どうしても読み飛ばしてってことをしがちなんだけど、きちんとしたことを理解しておこうっと。

webukatu.com

何がいけない？

Vue.js入門 基礎から実践アプリケーション開発まで

やっと２章に入りました。

そこでCreate a new fiddle - JSFiddleとローカルとでデータを作成してまぁ試しているわけですが、案外時期によって違うものなんでしょうね。

JSFiddleが若干違う。

まずJS部分が変わってきている。

本ではHTMLに

<script src="http://unpkg.com/vue@2.2.1"></script>

を入れて雛形としているけど、今はJSで選択できる。

[FRAMEWORKS & EXTENSIONS]に多くの種類が選択可能。

すごいな。

さてさて、そこからまた入力しても進まない。

    var vm = new Vue({
        el: '#app',
        data: { // dataプロパティ
            items: items
        }
    })

ってことでChrome DevToolsを開いてConsoleタブで入力して確認。

ここでも挙動が違う？

まずJSFiddleのConsoleでは

[result(fiddle.jshell.net/) fiddle.jshell.net」を選択してConsoleタブで

console.log(vm)

表示が違うんだよね。

まぁ違ってはいないのだろうけど、一番困ったのは「データの変更」

vm.items[0].name = '万年筆'

ってすると表示が変更になるってことなんだけど、結果は

「Uncaught SyntaxError: Invalid or unexpected token」

エラー。しかも入力ミス？

えぇ〜何が？なわけです。

とりあえず、いろいろ試行錯誤してみたところ、

vm.items[0].name = "万年筆"

が正解。シングルじゃなくてダブルってことのようです。

そうなんですか。この本出版されたの２０１８年１０月らしいのですが、１年未満で変更されたのか？

おっと、第１版だわ。これ。

まぁこの手の本で増刷ってあるのかわからないけど。

ということで備忘録まで。

って書いたことを忘れるのだけど。

webukatu.com