@shin_motoposted at 2021-03-31

【Vue.js】v-bindの使い方

Q&A

Closed

Vue.js v-bind

解決したいこと

フロントエンドをVue.js　v2.6.10
バックエンドをlaravelで構築しているアプリケーションを運用。
vueコンポーネントのテンプレートからpostでlaravelのコントローラーにリクエストを送りたい。

前提

バックエンドを改修しないで解決したいので、
API化やaxiosなどで非同期にするのではなく、あくまでvue.jsからコントローラーへpostする方法限定の話。

発生している問題

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;
  }
略

input要素のvalue属性をバインドするのは珍しくないと思うのだが。

1Answer

@yoshi389111 posted at 2021-03-31

Vue での bind の結果が DOM に反映されるのは、メソッドが return した後になります。
仮想DOMだけ書き換えて、DOMそのものが書き換わる前に submit を実行しているので、値が POST できないのだと思います。

submit するのを、nextTick 内で実施してみてはいかがでしょうか？

アロー関数が使えるなら

  formSubmit(id, action){
    this.id = id;
    this.action = action;
    this.$nextTick(() => this.$refs.form.submit());
    return false;
  }

アロー関数を使わないなら

  formSubmit(id, action){
    this.id = id;
    this.action = action;
    this.$nextTick(function() {this.$refs.form.submit();});
    return false;
  }

（動作確認しないで書いているのでそのままではうまく動かないかもしれませんが、参考まで）

1Like

Comments

@shin_moto
Questioner
的確なご回答ありがとう御座います。
原因と対策について理解しました。ご提案頂きましたnextTickを用いる事で想定通りの動きとなりました。本当に助かりました！

Are you sure you want to delete the question?