【Vue.js】v-modelを使ってた時になんか動なかったお話

とてもひさしぶりの投稿です。最近さぼっておりました。

銀座の見習いエンジニアのやまそうです。

銀座のとある会社でRailsエンジニアとして日々精進しているのですが、先日久々にVue.jsが絡んだシステム改修チケットを担当することになりました。まぁ、チケット内容としては画面に表示されているはずの物が画面に表示されていないのでなんとかしろよという大変なんでもないカスチケットだったわけなのですが。。。

とあるところにハマって「What!!??」ってなりました。

そのとあるところとは・・・リアクティブなるもの

 

リアクティブとは

リアクティブとはなにか。

これは公式ドキュメントを読んでもらったほうが良いですね。公式ドキュメントに「リアクティブの探求」なるページがあってそこに詳しく書いております。ぶっちゃけ私が「What!!??」ってなった問題もここをちゃんと読めば解決するものでした。

リアクティブの探求

簡単にリアクティブは何かというと、v-modelとか使った時にvue.jsくんが画面上のフォームの変更を検知してリアルタイムに画面に変更を描写することです。

うん、わかりにくいですね。自分でも書いててわかりにくいと思いました。実際のコードをお見せします。

vue = new Vue ({
  el: '#sample',
  data: {
    profile: {
      name: "",
      age: "",
    }
  }
})

 

<div id="sample">
  <div class"name">
    <input type="text" name="name" v-model="profile.name">
    <p>{{profile.name}}</p>
  </div>
  <div class"age">
    <input type="number" name="name" v-model.number="profile.age">
    <p>{{profile.age}}</p>
  </div>
</div>

 

vue側にdataを用意してHTMLにバインドして表示するだけのコード。

このように書くとインプットフィールに適当に文字を入れると入力された文字がリアルタイムに表示されます。これがリアクティブな状態というらしいです。多分・・・。

別に難しいことをしているわけでもない。なんならvueを使い始めたらこれをひたすら使うんじゃないでしょうか?

ところがこの超基本的な部分でハマってしまいました。

 

なんで動かなかったのか

なんで動かなかったのか。

それはとあるものを書くとこのリアクティブという状態が無くなってしまうからです。つまり画面上のフォームの変更を検知してくれなくなってしまう。

では、何を書くと動かなくなるか。私の例を紹介致します。
私の場合はフォームを一度リセットしてデフォルト値をセットするという処理をしていました。以下の様のコードになります

methods: {
  reset: function () {
    vue.profile = {};
    vue.profile.age = 20;
  }
}

profileを一度空のハッシュにしてageに初期値として20を入れてあげるだけの処理。見た目的にもなんの違和感もなくて全く疑っていませんでした。

ですがvue.profile.age = 20;この書き方がだめなようです。

この書き方だと変更を検知するリアクティブなdataにならないそうです。
なので次のように書いて上げましょう。

this.$set(this.profile, 'age', 20)

これでリアクティブになります。

 

まとめ

こんなことでハマっていたなんてとてもお恥ずかしい。

vue.jsは色々と良い感じにリアルタイムっぽくしてくれるものだけど、書き方気をつけないと動かないときあるよってこと頭の片隅に置いといてもらえたら嬉しいです(´・ω・`)

みなさんも気をつけてね。

今回は雑な記事になってしまいましたが、最後まで読んでいただきありがとうございました。vue.jsについては私もまだ勉強中ですので全く理解しておりませんのでご了承下さい笑

今後もvue.jsの記事を少しづつ書いていこうかなと思いますー。

 

参考サイト

label,

書いた人

銀座の事業会社でエンジニアをやっております。 まだまだぺーぺーです。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です