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

<template>
  <div id="app">
    <div>
      <radioFontWeight @change="changeFontWeight"></radioFontWeight>
    </div>
    <div>
      <div v-bind:style="styleObject">{{message}}</div>
    </div>
  </div>
</template>

<script>
import radioFontWeight from './components/radio-fontWeight'

export default {
  name: 'App',
  components: {
    radioFontWeight
  },
  data() {
    return {
      message: '私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。',
      styleObject: {
        color: '#111',
        fontSize: '16px',
        lineHeight: '1.7',
        letterSpacing: '0em',
        fontWeight: 'normal'
      }
    }
  },
  methods: {
    changeFontWeight: function (weight) {
      this.styleObject.fontWeight = weight;
    }
  }
}
</script>

<template>
  <div>
    fontWeight:
      <input
        type="radio"
        id="fontWeight01"
        value="normal"
        v-model="fontWeight"
        @input="updateValue"
      >
      <label for="fontWeight01">Normal</label>
      <input
        type="radio"
        id="fontWeight02"
        value="bold"
        v-model="fontWeight"
        @input="updateValue"
      >
      <label for="fontWeight02">Bold</label>
  </div>
</template>

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