vue.jsのフォームのバインディングについて

Question

vue.jsのフォームのバインディングがよくわからないです。

https://jp.vuejs.org/v2/examples/firebase.html

こちらの公式リファレンスのサンプルで下記のコードが有るのですが

  methods: {
    addUser: function () {
      if (this.isValid) {
        usersRef.push(this.newUser)
        this.newUser.name = ''
        this.newUser.email = ''
      }
    },
    removeUser: function (user) {
      usersRef.child(user['.key']).remove()
    }
  }

・formの値ってどうやってバインディングされるんでしょうか？上記はおそらくthis.newUser.name = ''この右辺にv-modelのnameが来るんだと思うんですがなぜこの右辺にフォームの値が来るのか分からず。。。

またnewUserのnameとemailに値を入れてからpushなので

        this.newUser.name = ''
        this.newUser.email = ''
        usersRef.push(this.newUser)

この順番じゃないのはなんででしょうか？

Answer 1

フォームとのバインディングの本質はここですね

  <form id="form" v-on:submit.prevent="addUser">
    <input type="text" v-model="newUser.name" placeholder="Username">
    <input type="email" v-model="newUser.email" placeholder="[e-mail]">
    <input type="submit" value="Add User">
  </form>

  data: {
    newUser: {
      name: '',
      email: ''
    }
  }

input[type="text"]の部分ではnewUserのnameと結びつき、v-modelでバインディングしてるので、値が入力されるとデータが書き換わります。
同様にemailの部分もそのようになってます。
https://jp.vuejs.org/v2/guide/forms.html

質問者さんがおっしゃられている部分はデータ登録の部分ですね。

1. 登録を押す
2. Firebaseにデータが登録される
3. 登録が終わったので次の登録のためにフォームを初期化する

という処理をしていますよ