Vue.js で、フォームの初期値を html側で設定する

インターンの子が困ってたので、一緒にしらべたやつのメモ

• Vue.js でフォームを扱う
• 入力フィールド (input や textarea) の初期値は、Vue.js 側ではなく、html にあらかじめ埋め込んだ値を設定したい (この場合は laravel の blade で入れたかった)

でまあ、インターンの方はいろいろ試してて

• props を使う？
• created? mounted? あたりで DOMを読み取る？
• v-model? v-bind?

最終的に、こんな感じでうまくいきました

<div id="app">
  <textarea id="defaultField" v-model="foo">ここに初期値が入る</textarea>
  <p>{{ foo }}</p>  
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: document.getElementById('defaultField').value
  }
});
</script>

単純だった

props も created, mounted も使わず、ふつうに Vue.js 側の data の初期値に、DOM読んで取ってきた値を入れてやる

それだけなんだけど、ちょっと時間使っちゃったのでメモでした (もっと Vue.js らしい上手なやり方とかあるのかな…)

↓Codepen で試したの、こちら

See the Pen vue.js default value by h.matsuo (@matsuoshi) on CodePen.