・Vue.jsでテキストエリアをバインディングする方法は？
こんな疑問にお答えします。
テキストエリアにてデータバインディングをする場合、少し注意点があります。。
今回は自分用のメモとして、方法をまとめてみました！
参考にどうぞ
ということで、この記事では「Vue.jsでテキストエリアをバインディングする方法」について解説していきます！
Vue.jsでテキストエリアをバインディングする方法
目次
【解説】Vue.jsでテキストエリアをバインディングする方法
実はテキストエリアでは、マスタッシュ構文が使えません。
下記にマスタッシュ構文を使ったサンプルを作りました。
See the Pen vue テキストエリア① by jito-coder (@jito-coder) on CodePen.
初期値は表示されますが、文章を変更しても下部分が動的に変わりませんよね。
<div id="app">
<!-- テキストエリア -->
<textarea>{{ message }}</textarea>
<!-- 出力用 -->
<p>値は：{{ message }}</p>
</div>const app = Vue.createApp({
data: () => ({
message: 'おはようございます'
})
}).mount('#app')
【解説】Vue.jsのマスタッシュ構文の使い方【コードあり】 テキストエリアをバインディングするには「v-model」ディレクティブを使いましょう。
<textarea v-model=""></textarea>これでデータバインディングすることができます。
かつ、初期値の値もちゃんと表示されます。
【解説】Vue.jsのv-modelの使い方【サンプルコードあり】 実際にテキストエリアにv-modelを使ったサンプルを作ってみました。
See the Pen vue テキストエリア② by jito-coder (@jito-coder) on CodePen.
テキストエリア内の文章を変えると、下部分も動的に変わりますよね。
<div id="app">
<!-- テキストエリア -->
<textarea v-model="message"></textarea>
<!-- 出力用 -->
<p>値は：{{ message }}</p>
</div>const app = Vue.createApp({
data: () => ({
message: 'おはようございます'
})
}).mount('#app')【解説】Vue.jsでテキストエリアをバインディング【その他】
最後にテキストエリアにてデータバインディングするときの、その他の特徴を紹介します。
- テキストエリア内の文章を改行する方法
- マスタッシュ構文があっても無視される
順に見ていきましょう。
ちなみに「v-model」にて、テキストエリア内の文章を改行させておきたい場合は「\n」を使えば可能です。
下記のようにすれば改行できます。
const app = Vue.createApp({
data: () => ({
message: 'おはよう\nございます'
})
}).mount('#app')小ネタですが「v-model」を使ってるのに、テキストエリア内にマスタッシュ構文があってもそれは無視されます。
ようは「v-model」の値が表示されるんですよね。
下記のテキストエリアの初期値は「おはようございます」が表示されます。
<textarea v-model="message">{{ newMessage }}</textarea>const app = Vue.createApp({
data: () => ({
message: 'おはようございます',
newMessage: 'こんにちは'
})
}).mount('#app')
【解説】Vue.jsでラジオボタンを動的に使う【サンプルあり】 
【解説】Vue.jsでセレクトボックスを動的に使う【単体／複数】 
【解説】Vue.jsでチェックボックスを動的に変える【単体／複数】 【解説】Vue.jsでテキストエリアをバインディングする方法
- マスタッシュ構文は使えない
- 「v-model」を使ってデータバインディングする
- 改行するには「\n」を使う
- 「v-model」と「マスタッシュ構文」がある場合、初期値は「v-model」の値が表示される
Vue.jsでテキストエリアを使う時はためしてみてね！
