Vue.jsでsubmitした時にdataオプションへ値が入らない

Question

テンプレートからsubmitをした時に、Vueインスタンスのdataオプションに値が保持されないことを解決したいです。

v-modelを使用し、inputタグとdataオプションの内部とは紐づけています。
したがって、サブミットするまで、「双方向バインディング」ができていることは確認しています。

jsのコンソールで this.number のように確認すると、undifinedとなります。
なぜ値が保持されないのでしょうか。
解決法をご存知の方がいらっしゃれば、ご回答よろしくお願い致します。

該当の箇所とは、直接関係ありませんが、このコードはPayjpという決済機能のAPIを使用しております。

全体のコードは以下の通りです。
Vue.jsのコード

import Vue from 'vue/dist/vue.esm'

var app = new Vue({
  el: "#app",
  data () {
    return {
      number: "",
      cvc: "",
      exp_month: "",
      exp_year: "",
    }
  },
  methods: {
    addCard: function(event) {
      Payjp.createToken(this.data, (status, response) => {
        if (status == 200) {
          this.number = ""
          this.cvc = ""
          this.exp_month = ""
          this.exp_year = ""
          $("#card_token").append(
                      $('<input type="hidden" name="payjpToken">').val(response.id)
          );
          document.chargeForm.submit()
          alert("登録が完了しました")
        } else {
          alert("カード情報が不正です")
        }
      })
    }
  }
})

テンプレート部分のコード

<div id="app">
  <form v-on:submit.prevent method="post" action="/cards/pay" id="charge-form" name="chargeForm" >
    <div class="form-group col-auto">
      <label>カード番号</label>
      <input type="text" v-model="number" class="number form-control form-control-lg" name="number" id="card_number" maxlength="17" placeholder="カード番号">
    </div>
    <p>{{ number }}</p>
    <div class="form-group col-auto">
      <label for="">CVC</label>
      <input type="text" v-model="cvc" class="cvc form-control form-control-lg" name="cvc" id="cvc" maxlength="3" placeholder="CVC">
    </div>
    <p>{{ cvc}}</p>
    <div class="form-group col-auto">
      <label for="">有効期限</label>
      <input type="text" v-model="exp_month" class="exp_month form-control form-control-lg" name="exp_month" id="exp_month" maxlength="2" placeholder="月">
    </div>
    <div class="form-group col-auto">
      <input type="text" v-model="exp_year" class="exp_year form-control form-control-lg" name="exp_year" id="exp_year" maxlength="4" placeholder="年">
    </div>
    <div class="card_token">
      <button v-on:click="addCard" type="submit" name="button" id="token_submit" class="form-control create-button" >送信する</button>
    </div>
  </form>
</div>

追記

var app = new Vue({
  el: "#app",
  data: {
    card: {
      number: "",
      cvc: "",
      exp_month: "",
      exp_year: "",
    }
  },
  methods: {
    addCard: function(event) {
      Payjp.createToken(this.card, (status, response) => {
        debugger
        if (status == 200) {
          this.number = ""
          this.cvc = ""
          this.exp_month = ""
          this.exp_year = ""
          $("#card_token").append(
                      $('<input type="hidden" name="payjpToken">').val(response.id)
          );
          document.chargeForm.submit()
          alert("登録が完了しました")
        } else {
          alert("カード情報が不正です")
        }
      })
    }
  }
})

Answer 1

jsのコンソールというのは、もしかして開発者ツールを指していますか？
もし開発者ツールで確認したいのでしたら

app.number

で確認できます。
appはVueのインスタンスが入っている変数を指しています。

addCardのメソッドの中でconsole.log(this.number)と実行した上でundefinedになるのでしたら↑の話は的外れになってしまいますが、、、

Comments

[ryoooos]

ご回答ありがとうございます。
開発者ツールを使用しています。

app.numberでは確認できませんでしたが、addCardメソッド内でconsole.log(this.number）とすると、値は入っていました。

最終的にやりたいことは、双方向データバインディングで代入された値を、cardという変数に代入して、そのcardという変数をPayjp.createTokenというメソッドの引数として渡すことです。

そこで、dataオプションを上記のように変更しました（追記として載せております）。

以上のようなコードにしてもステータスエラー402が返ってきます。
Payjp.createTokenメソッドは、キー、バリューの形式で値を正しく入れれば発動するメソッドです。
これはdataオプションの形式に何か問題があるのでしょうか？
ご回答よろしくお願い致します。

[ryoooos]

cardオブジェクトをインスタンスから切り出すことで、うまく値が渡りました。
ありがとうございました！