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

先に進まない

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

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

webukatu.com

何がいけない?

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

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

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

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

JSFiddleが若干違う。

f:id:kisokoji:20190602160558p:plain:w500

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

本ではHTMLに

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

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

f:id:kisokoji:20190602160825p:plain:w200

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

すごいな。

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

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

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

ここでも挙動が違う?

まずJSFiddleのConsoleでは

f:id:kisokoji:20190602161232p:plain:w300

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

console.log(vm)

表示が違うんだよね。

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

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

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

f:id:kisokoji:20190602161605p:plain:w200

「Uncaught SyntaxError: Invalid or unexpected token」

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

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

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

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

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

そうなんですか。この本出版されたの2018年10月らしいのですが、1年未満で変更されたのか?

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

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

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

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

webukatu.com