フォーム入力バインディングを理解する その9

何年か前に jQuery で作った type tester という簡易的なフォント（関連のスタイリング）のテスターツールを Vue.js で作ってみる。 その9

GitHub Pages： https://yuheijotaki.github.io/type-tester/
GitHub リポジトリ：https://github.com/yuheijotaki/type-tester

methods: でアロー関数が使えない

せっかくVue CLI 使ってwebpackも入ってES6使えるのだからアロー関数とか使おうと思ってたのですが、methods: の function に対しては this の参照が期待通りにならないので使えないとのことでした。。

公式ドキュメント https://jp.vuejs.org/v2/api/index.html#methods

メソッド(例 plus: () => this.a++) を定義するためにアロー関数を使用すべきではないことに注意してください。

App.vue（抜粋）

// アロー関数を使う（ダメな例）
methods: {
  toggleCss: () => {
    this.displayCss = !this.displayCss;
  },
  ...

// アロー関数を使わない（よい例）
methods: {
  toggleCss: function () {
    this.displayCss = !this.displayCss;
  },
  ...

vue-head を使って meta / OGP 設定をする

今回はSPAではないので特に難しいことせずに index.html にmeta / OGP 設定は直書きできるのですが、今後のために動的生成とページごと設定を実現したいので vue-head を使ってみました。

Vue CLIを使っている場合になります。
まずインストール

$ npm install vue-head --save

/src/main.js

...
import VueHead from 'vue-head'

Vue.use(VueHead)
...

/src/App.vue

...
  data() {
    return {
      metaTitle: 'site title'
    },
  },
  head: {
    title: function () {
      return {
        inner: this.metaTitle
      }
    },
    meta: [
      { name: 'description', content: 'My description', id: 'desc' }
    ]
  }
...

のようにdataから動的生成する場合は title: function () { return … のように指定する。

JSで書き換えが行われるので静的HTMLでなく検証ツールでの確認が必要。

他の設定項目は Github のドキュメントが詳しいです。
OGP / Twitter / Schema.org の設定、Google Analytics もできるみたい。 https://qiita.com/buchiya4th/items/dd8f16dfcd296bd247bb
案件で使ったらこれだけで記事書きたいなと思います。

次やること

• localStorage 使ってリロード対策
• 全体スタイリング