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

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

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

<input type="color"> のバインディング

これも v-model="" でバインディングが可能

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

<template>
  <div>
    Color: <input
      type="color"
      v-model="color"
      @input="updateValue"
      @focus="$emit('focus', $event)"
      @blur="$emit('blur', $event)"
    >
    <input
      type="text"
      v-model="color"
      @input="updateValue"
      @focus="$emit('focus', $event)"
      @blur="$emit('blur', $event)"
    >
  </div>
</template>

<script>
export default {
  name: 'inputColor',
  data() {
    return {
      color: '#000000'
    }
  },
  methods: {
    updateValue(e) {
      this.$emit('input', e.target.value)
      this.$emit('change', e.target.value)
    }
  }
}
</script>

すこし課題

<input type="color">と <input type="text"> を双方向にバインディングする場合は #000 など短縮カラーコードではなく #000000 など6桁で入力されていないと color側が バインディング（同期）がされない。HTML側の仕様といえば仕様なのですが、

• 短縮カラーコードが入力された場合は6桁に変換
• カラーコード以外が入力された場合は、元のセットされていた値を復元

を余裕あったら実装したい

次やること

• 和文テキストのデフォルト、欧文テキストのデフォルトをそれぞれ用意、自由入力欄も残して選択式でテキスト表示をする