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

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

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

font-family: のバインディング

考え方は下記のように 欧文指定 + 和文指定 になるのでちょっと一工夫必要でした。

日本語ラジオボタン／英語ラジオボタン のコンポーネント

radio-fontFamilyJa.vue（一部簡略化）

<template>
  <div>
    fontFamilyJa:
      <input
        type="radio"
        name="fontFamilyJa"
        id="fontFamilyJa01"
        value="Hiragino Kaku Gothic ProN"
        v-model="fontFamilyJa"
        @input="updateValue"
      >
...

radio-fontFamilyEn.vue（一部簡略化）

<template>
  <div>
    fontFamilyEn:
      <input
        type="radio"
        name="fontFamilyEn"
        id="fontFamilyEn01"
        value="Helvetica"
        v-model="fontFamilyEn"
        @input="updateValue"
      >
...

親側で選択したフォントを取得してもう片方のラジオ選択状態も取得、その後に 欧文 + 和文 に並べてフォントファミリー指定する

App.vue（一部簡略化）

...
  methods: {
    changeFontFamily: function (family) {
    // フォントファミリーが変更された際の日本語/英語の処理分岐
    if ( family.familyJa ) {
      // 日本語が選択された場合は英語のチェック状態を取得
      var familySelectedJa = family.familyJa;
      var familySelectedEn = this.getOtherSideFont('fontFamilyEn');
      } else if ( family.familyEn ) {
      // 英語が選択された場合は日本語のチェック状態を取得
      var familySelectedJa = this.getOtherSideFont('fontFamilyJa');
      var familySelectedEn = family.familyEn;
    }
    // CSSの値用に 欧文指定 -> 和文指定 の順に並べる
    const familyJoin = `${familySelectedEn} , ${familySelectedJa}`;
    this.styleObject['font-family'] = familyJoin;
  },
...

ラジオボタンの選択状態取

これはJSですが、↑ の getOtherSideFont() は

getOtherSideFont: function (name) {
  // ラジオボタンオブジェクトを取得する
  // ref: https://javascript.programmer-reference.com/js-radio-value/
  var radios = document.getElementsByName(name);
  // 取得したラジオボタンオブジェクトから選択されたものを探し出す
  var result;
  for(var i=0; i<radios.length; i++){
    if (radios[i].checked) {
      // 選択されたラジオボタンのvalue値を取得する
      result = radios[i].value;
      break;
    }
  }
  return result;
},

な感じで下記コピーしました。
[JavaScript] ラジオボタンのvalue値を取得する – コピペで使える JavaScript逆引きリファレンス

やっぱりJSが弱いなあと思います。

次やること

• color: や background-color: は <input type="color"> で実装する