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