目次
はじめに
プルダウンで定型文を選ぶとフォームにその内容が入力されるテキストエリアのコンポーネントをVue.jsで作成しました。同じような内容が入力されるようなテキストエリアにおいて、入力の手間やミスの削減に役立ちます。
今回はローカルで開発環境を構築する手間を省くため、CodeSandboxで開発環境を用意しました。
実装
実装の概要
ドロップダウンメニュー（TemplateSelector.vue）とテキストエリア（TextArea.vue）のコンポーネントを作成しました。ユーザーがドロップダウンメニューで入力テンプレートを選択し、「適用する」というボタンをクリックすることでその内容をテキストエリアに挿入できるようにしています。
テキストエリアとドロップダウンメニューのコンポーネントは親コンポーネント（TextAreaWithTemplate.vue）から呼び出します。TemplateSelector.vueで選択した定型文を親コンポーネントに渡し、親コンポーネントからTextArea.vueに選択された定型文を渡すことでリアクティブにテキストエリアに反映するようにしています。
実装の詳細
実装したコード
ドロップダウンメニュー（TemplateSelector.vue）
v-forでテンプレートのリストをselectのoptionとして展開します。テンプレートを選択して「適用する」ボタンをクリックした際にemitTemplateメソッドを実行し、select-template というカスタムイベントをemit で親コンポーネントに送信します。
