[解決済み】フォームが接続されていないため、フォーム送信がキャンセルされる Vue jsとLaravelの連携

質問

私はインラインテンプレートの中にフォームを作成し、条件付きで次のようにレンダリングしています。

           <form v-if="editing === true" >      
                <button type="submit" @click="editing = false">Update</button>    
            </form>

            <div v-if="editing === false">
                <div >{{ $answer->body}}</div>
                <div class="row mt-3">
                    <div class="col-4">
                        @can('update', $answer)

しかし、formタグ内のupdateボタンを押すと、"Form submission canceled because the form is not connected"という警告が表示されるのです。vue.jsは初めてなんです。何かご指導いただければ幸いです。

どうすればいいですか？

この警告は、フォームがドキュメントに添付されなくなったために発生します。 フォームが実際に送信される前に編集が false に変更されたため、フォームが切り離されているのです。

この問題を解決するには、editing変数をfalseに変更する前に投稿が行われたかどうかを確認する必要があります。

一つのアプローチとして、フォームを送信する関数を呼び出してから、変数を変更する方法があります。

submitForm: (formElement) => {
  let form = this.$el.querySelector(formElement)
  form.submit()
  this.editing = false
}

で呼び出す。

<form id="form-1" v-if="editing === true" >      
   <button @click="submitForm('#form-1')">Update</button>    
</form>

また、フォームのセレクタを渡すようにしたので、フォームを増やしても壊れることはありません。