フォーム入力バインディングを理解する その1
何年か前に 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
関連
フォームのコンポーネント化
次やること
フォームでスタイル要素をバインディングする。