『これからはじめるVue.js実践入門』の正誤表など

jQueryからのステップアップとして『基礎から学ぶVue.js』で挫折。『これからはじめるVue.js実践入門』が分かりやすそうだったので、再チャレンジ中。ただ、おかしな点がいくつか出てくるので、その度に追記していく。

対象書籍

『これからはじめるVue.js実践入門』初版第1刷

正誤表など

• 45～47ページ
  • _.debounceメソッドは、「遅延」関数ではなく、「抑制」関数、または「間引き」関数と呼ぶほうが正しい。遅延では実行のタイミングを遅らせるだけで必ず実行されてしまう。
• 49ページ
  • 上部のソースコード内の、thisをthatに退避するコードは、蛇足。おかげでthisについて深く知ることができたけれど。
• 77ページ
  • サンプルコード誤り。thisをthatなどに退避させていないため、テンプレートに反映されず、図3-20のようにはならない。正しいサンプルコード「model_file.js」は下記の通り。

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    onchange: function() {
      let fl = this.$refs.upfile.files[0];
      let data = new FormData();
      let that = this;
      data.append('upfile', fl, fl.name);
      fetch('upload.php', {
        method: 'POST',
        body: data,
      })
      .then(function (response) {
        return response.text();
      })
      .then(function (text) {
        that.message = text;
      })
      .catch(function (error) {
        alert('Error: ' + error.message);
      });
    }
  }
});

• 77ページ
  • Note「ref属性の意味」の「id、name、class属性を利用するということは、コードの側がテンプレートの構造を把握していなければならない」というのは、おかしい。id属性はそのページでユニークなのでテンプレートの構造を把握する必要がない。
• 93～100ページ
  • サンプルHTML誤り。table要素直下にth要素を配置するのはHTML5の構文エラー。
• 113ページ
  • <p v-html="message"></p>はHTML5の構文エラーになる恐れがあるため、<div v-html="message"></div>が正しい。
• 114ページ
  • Note「テンプレート文字列」の右の「ES20XX」は「ES2015」の誤り。