表单提交被取消，因为表单未连接 - Laravel 8 中的 VueJs

Question

我想测试控制台日志中的响应。我正在使用谷歌检查工具。我在网络>>XHR中看不到任何响应。但我在console中看到“表单提交已取消，因为表单未连接”。示例屏幕检查工具屏幕我无法追踪问题的实际位置。我正在观看有关 laravel 和 vue 的课程视频。在此先感谢您的时间。 表格

<form v-if="editing" @submit.prevent="update">
    <div class="form-group">
    <textarea rows="10" v-model="body" class="form-control"></textarea>
    </div>
    <button @click="editing = false">Update</button>
    <button @click="editing = false">Cancel</button>
</form>

在控制器中

if ($request->expectsJson()) {
            return response()->json([
                'message' => 'Answer updated!',
                'body_html'
            ]);
        }

Vue.JS

<script>

export default {
 props: ['answer'],

 data () {
  return {
   editing: false,
   body: this.answer.body,
   bodyHtml: this.answer.body_html,
   id: this.answer.id,
   questionId: this.answer.question_id
  }
 },

 methods: {
  update () {
   axios.patch(`/questions/${this.questionId}/answers/${this.id}`, {
    body: this.body
   })
   .then(res => {
    console.log(res);
    this.editing = false;
   })
   .catch(err => {
    console.log("something went wrong");
   });
  }
 }       
}
</script>

表单默认是隐藏的。仅当单击“编辑”按钮时才会出现。唯一的问题是提交表格。错误消息：表单提交已取消，因为表单未连接

Answer 1

您的表单中的

v-if="editing"

设置为 false。这应该是真的，因为表单必须在提交时存在。您正在从 DOM 中删除您的表单。同时将

this.editing

移动到 axios 调用中的

finally()

块。

Answer 2

<form v-show="editing" @submit.prevent="update">
    <div class="form-group">
</form>

使用 v-show="editing" 指令