【Vue.js】methodsでバインドした値をsubmitする際に上手くpostされない時にnextTickを使った話

Qiitaの質問機能で回答頂いた内容がとても勉強になったので、
復習を兼ねて記事としても残しておく。

発生した問題

vueテンプレート内で、form要素のaction属性、input要素のvalue属性を動的に処理したいが、
methods内でdataに対して、属性値を更新しても上手く代入した値が反映されず、空でpostされてしまう。

事例

vue.js

略
<form :action="action" method="post" ref="form">
  <input :value="id" type="hidden" name="id">
</form>

<span @click.prevent="formSubmit(item.id, '/edit')">編集する</span>
略
export default {
  data(){
    return {
      action: '',
      id: ''
    }
  },
  methods:{
    formSubmit(id, action){
    this.id = id;
    this.action = action;
    this.$refs.form.submit();
    return false;
  }
略
    

ちなみに↓だと上手くいく

vue.js

略
<form action="" method="post" ref="form">
  <input value="" type="hidden" name="id" ref="input">
</form>

<span @click.prevent="formSubmit(item.id, '/edit')">編集する</span>
略
export default {
  methods:{
    formSubmit(id, action){
    this.$refs.form.value = id;
    this.$refs.form.action = action;
    this.$refs.form.submit();
    return false;
  }
略

解決方法

そもそもの問題はbindした結果がDOMに反映されるのが、
メソッドがreturnした後になる為、仮想DOMだけ書き換えて、
DOMそのものが書き換わる前に submitを実行する形となり、値がPOST出来なかった。

そこでnextTickを使ってsubmitをDOMの更新サイクル後に実行する。

vue.js

略
<form :action="action" method="post" ref="form">
  <input :value="id" type="hidden" name="id">
</form>

<span @click.prevent="formSubmit(item.id, '/edit')">編集する</span>
略
export default {
  data(){
    return {
      action: '',
      id: ''
    }
  },
  methods:{
    formSubmit(id, action){
    this.id = id;
    this.action = action;
    this.$nextTick(() => this.$refs.form.submit());
    return false;
  }
略
    

nextTickはDOM更新後に第1引数で渡した関数を実行してくれる。
これでmethodsで更新した値でPOSTする事が出来た。めでたしめでたし。