Vue.jsのwatch内でバインド変数を変化させた時、リクエストパラメータが変化していない

Question

前提・実現したいこと

Vue.jsのwatch内で代入したdataをリクエストパラメーターに反映させたい。
４つのselectタグをwatchで監視して、それぞれ値が変化した時にsubmitしています。
この時、どのselectを変化させたのかを遷移先のコントローラーで取得するため、
hiddenタグにwatch内で識別文字列を代入して一緒にpostしたい。

発生している問題・エラーメッセージ

バインド自体は正常で、submitするまではvueのdataと画面のタグの値が連動
しているにも関わらず、送られたリクエストパラメータはwatch内で代入する前の値に
なってしまっています。

何が間違っているかわかる方おられませんか？

該当のソースコード

var input_form = new Vue({
  el:'#input_form',
  data:{
    category_balance:'支出', //<select>タグとバインド
    category_large:'',      //<select>タグとバインド
    category_middle:'',     //<select>タグとバインド
    category_small:'',      //<select>タグとバインド
    changed_form:'aaa'         //<hidden>タグとバインド　
  },
  watch:{
    category_balance:{
      handler:function(newVal,oldVal){
//ここで値を代入すると、hiddenタグの値が'category_balance'に変化するが、
//送られた値は代入前の'aaa'になる。
        this.changed_form='category_balance';
        $(form).submit();
      }
    },
    category_large:{
      handler:function(newVal,oldVal){
        changed_form='category_large';
        $(form).submit();
      }
    },
    category_middle:{
      handler:function(newVal,oldVal){
        chaged_form='category_middle'
        $(form).submit();
      }
    },    
  }
})

<!--抜粋-->
<form action="input_book" method="post" id="form">
<input type="hidden" name="changed_form" v-model="changed_form">

試したこと

submit()を止めて、hiddenタグ、selectタグの値が正しくバインドされていることを確認した。

補足情報（FW/ツールのバージョンなど）

Lavel
Vue.js

Answer 1

憶測ですが

watch発火→submit→DOM更新
の順序になっているのではないでしょうか
Vue的に正しいかはわかりかねますが

setTimeout(function () {
    $(form).submit()
},10)

みたいな感じで一旦Vueを抜けてDOM更新がされてそうなタイミングでsubmitしてみてはどうでしょうか

submit()を止めて

これは、デベロッパーコンソールでブレークポイントを貼って確認した方がその時のタイミングのDOMが確認できるのでより適切です

Comments

[misskabu]

いただいたコードを使用したところ、無事に更新されたデータがポストされました。
ありがとうございました。
また、デベロッパーコンソールにブレークポイントを張れる事を知らず、今回やり方を調べて習得できました。その点もありがとうございました。