Vue: フォーム値のバインドが十分に速く更新されない

作成日 2016年12月20日 · 3コメント · ソース: vuejs/vue

次のことを行うmountedメソッドしか持たない単純なコンポーネントがあるとします。

this.myValue = 'a value'

$(this.$el).parent('form').submit()

私のコンポーネントhtmlは次のようになります：

<form action="http://…">
    <input type="text" :value="myValue">
</form>

ご覧のとおり、私はjQueryを使用してフォームを送信しています。値の割り当てとフォームの送信の両方が同じ関数で行われる場合、__空のデータが送信されます__。遅延なしでタイムアウトを使用することでこれを回避できますが、もちろんそれは理想的ではありません。

setTimeout(() => {
    $(this.$el).parent('form').submit()
})

これは、マウントされたメソッドにない場合にも発生しますが、たとえばon blur outであるため、ページの読み込みや遅延とは関係ありません。 :valueとv-modelについても同じことが言えます。

VueやJSの内部についてはよくわかりませんが、まだ値を割り当てられていないためだと思います。タイムアウトを使用すると、送信は次のティックで発生します。

ソース

sebastiaanluca

最も参考になるコメント

this.myValue = 'a value'

this.$nextTick(function () {
  $(this.$el).parent('form').submit()
})

defcc 2016年12月20日

👍7 ❤1

問題を解決する方法はないと思いました。

この状況では、ajaxのparamの値を手動で書き込みます。

Yunfeng 2016年12月20日

この問題はそれ以前に投稿されましたか？何も見つかりませんでした。

ええと、私の場合は、ページの更新を含めてフォームを自動的に送信したいだけで、Ajax経由で送信したくない（そして送信できない）のです。解決策がない場合は、ドキュメントに記載しておくとよいでしょう。

sebastiaanluca 2016年12月20日

this.myValue = 'a value'

this.$nextTick(function () {
  $(this.$el).parent('form').submit()
})

defcc 2016年12月20日

👍7 ❤1

このページは役に立ちましたか？

0 / 5 - 0 評価