yuheijotaki.com

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

f:id:jotaki:20190212100544p:plain

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

jQuery ファイルは これ なのですが、冗長なので同機能でも Vue.js でうまく書けたらいいなと思います。

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

コンポーネント間のデータ受け渡し

前に 子コンポーネント → 親コンポーネントの $emit を使ったクリックイベントはしたことがあったけど フォーム入力はやったことなくちょっとつまづきました。

今回も Vue CLI を使っています。

App.vue（一部簡略化）

<template>
  <div id="app">
    <inputText @change="changeText"></inputText>
    <div>{{message}}</div>
  </div>
</template>

<script>
import inputText from './components/input-text'

export default {
  name: 'App',
  components: {
    inputText
  },
  data() {
    return {
      message: "デフォルトのメッセージ",
    }
  },
  methods: {
    changeText: function (message) {
      this.message = message;
    }
  }
}
</script>

/components/input-text.vue

<template>
  <div>
    <textarea
      :value="message"
      @input="updateValue"
      @focus="$emit('focus', $event)"
      @blur="$emit('blur', $event)"
    ></textarea>
  </div>
</template>

<script>
export default {
  name: 'inputText',
  data() {
    return {
      message: "デフォルトのメッセージ",
    }
  },
  methods: {
    updateValue (e) {
      this.$emit('input', e.target.value)
      this.$emit('change', e.target.value)
    }
  }
}
</script>

<textarea> 要素のバインディング

改行はCSS側の white-space: pre-line; で回避 参考： javascript - Rendering newline character in VueJS - Stack Overflow

white-space: pre; でも回避できる風だが、文字量多い場合にコンテンツエリアからはみ出してしまう。

参考リンク

コンポーネント間での値受け渡しprops $emit 関連

フォームのコンポーネント化

次やること

フォームでスタイル要素をバインディングする。