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

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

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

input type="range" と input type="number" を双方向でバインドして $emit する

両方に v-model="" 指定と、 min="" / max="" に同じ値を指定すればOKでした。

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

<template>
  <div>
    FontSize: <input
      type="range"
      min="10"
      max="200"
      v-model="fontSize"
      @input="updateValue"
      @focus="$emit('focus', $event)"
      @blur="$emit('blur', $event)"
    >
    <input
      type="number"
      min="10"
      max="200"
      v-model="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>

次やること

font-familly:, font-weight: あたりのラジオボタンコンポーネントを実装する