yuheijotaki.com

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

f:id:jotaki:20190212100544p:plain

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

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

フォーム要素をバインドしてスタイル変更

App.vue（一部簡略化）

<template>
  <div id="app">
    <div>
      <inputFontSize @change="changeFontSize"></inputFontSize>
    </div>
    <div>
      <div v-bind:style="styleObject">ここにテキストが入ります。</div>
    </div>
  </div>
</template>

<script>
import inputFontSize from './components/input-fontSize'

export default {
  name: 'App',
  components: {
    inputFontSize
  },
  data() {
    return {
      styleObject: {
        color: 'red',
        fontSize: '16px'
      }
    }
  },
  methods: {
    changeFontSize: function (size) {
      this.styleObject.fontSize = `${size}px`;
    }
  }
}
</script>

input-fontSize.vue（一部簡略化）

<template>
  <div>
    FontSize: <input
      type="number"
      min="10"
      :value="fontSize"
      @input="updateValue"
      @focus="$emit('focus', $event)"
      @blur="$emit('blur', $event)"
    > px
  </div>
</template>

<script>
export default {
  name: 'inputFontSize',
  data() {
    return {
      fontSize: 16,
    }
  },
  methods: {
    updateValue(e) {
      this.$emit('input', e.target.value)
      this.$emit('change', e.target.value)
    }
  }
}
</script>

style オブジェクト を使ってインラインスタイル

公式ドキュメント の通りですが、

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '16px'
    }
  }
}

と定義して

<div v-bind:style="styleObject"></div>

のようにバインドできる。
親側の変更監視のメソッドは

methods: {
  changeFontSize: function (size) {
    this.styleObject.fontSize = `${size}px`;
  }
}

とする。

次やること

<input type="text"> と <input type="range"> を組み合わせて双方向のバインディングを行う
参考: vuejs + input range