如何使用laravel inertia和vue.js更新表记录

我使用Laravel 8惯性和vue

我想更新帖子，并在主vue中使用此组件

<template>
<div class="container p-3 bg-green-600 flex flex-col">
    <div class="mb-8 text-2xl">{{ current_post.title }}</div>

    <div v-if="!edit" id="mode-display">
        <div v-html="compiledMarkdown" class="text-gray-700"></div>
    </div>
    <div v-else id="mode-edit">
        <form class="flex flex-col" @submit.prevent="updatePost">
        <input type="hidden" name="id" id="id" v-model="current_post.id">
            <button type="submit">Mettre à jour</button>
            <div class="flex">
                <div class="m-5 flex flex-col">
                    <label for="category">Catégorie du post</label>
                    <select class="px-2" name="category" id="category" v-model="current_post.category">
                        <option value="undefined">Sans</option>
                        <option value="Announcements">Annonce</option>
                        <option value="Narratives">Récit</option>
                        <option value="Pages">Page</option>
                    </select>
                </div>
                <div class="m-5 flex flex-col">
                    <label for="diaporama_dir">Dossier du diaporama</label>
                    <input name="diaporama_dir" id="diaporama_dir" type="text" placeholder="admin|1/Noël2019" v-model="current_post.diaporama_dir">
                </div>

            </div>
            <div class="flex">
                <div class="m-5">
                    <label for="beg_date">Date de début de l'événement</label>

                    <date-picker name="beg_date" format="YYYY-MM-DD" valueType="format" v-model="current_post.beg_date"></date-picker>
                </div>
                <div class="m-5">
                    <label for="end_date">Date de fin de l'événement</label>

                    <date-picker name="end_date" format="YYYY-MM-DD" valueType="format" v-model="current_post.end_date"></date-picker>
                </div>
                <div class="m-5">
                    <label for="close_date">Date de clôture des inscriptions</label>

                    <date-picker name="close_date" format="YYYY-MM-DD" valueType="format" v-model="current_post.close_date"></date-picker>
                </div>
                <div class="m-5 flex flex-col">
                    <label for="receive_registration">Accepte des inscriptions</label>
                    <select class="px-2" name="receive_registration" id="receive_registration" v-model="current_post.receive_registration">
                        <option value="false">Non</option>
                        <option value="true">Oui</option>
                    </select>
                </div>
            </div>

            <input class="p-5 mb-5 text-xl" type="text" v-model="current_post.title" />
            <div class="m-5 flex flex-col">
                <label for="abstract">Résumé</label>
                <textarea class="markdown bg-green-500 text-gray-100" name="abstract" id="abstract" v-model="current_post.abstract" rows="3"></textarea>
            </div>
            <div class="m-5 flex flex-col">
                <label for="body">Résumé</label>
                <textarea class="markdown bg-green-500 text-gray-100" name="body" id="body" v-model="current_post.body" rows="50"></textarea>
            </div>
        </form>
    </div>
</div>
</template>

<script>
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
import 'vue2-datepicker/locale/fr';

import marked from 'marked';
export default {
    name: "PostDetails",
    props: ["current_post", "edit"],
    components: {
        DatePicker
    },
      data() {
        return {
            
            form:{
                id:null,
                title: null,
                abstract: null,
                body: null,
                category: null,
                beg_date: null,
                end_date: null,
                close_date : null,
                receive_registration : null,
                diaporama_dir: null
            }
        };
    },
    methods:{
      updatePost(){
           this.$inertia.post('/post', this.form);
      }
    },
    computed: {
        compiledMarkdown: function () {
            if (this.current_post) {
                //transform markdown to html
                return marked(this.current_post.body);
            }
        },
        mounted() {},
    }
};
</script>

提交此表时，dd会输出以下内容：

Illuminate\Http\Request {#43 ▼
  #json: Symfony\Component\HttpFoundation\ParameterBag {#35 ▶}
  #convertedFiles: null
  #userResolver: Closure($guard = null) {#342 ▶}
  #routeResolver: Closure() {#351 ▶}
  +attributes: Symfony\Component\HttpFoundation\ParameterBag {#45 ▶}
  +request: Symfony\Component\HttpFoundation\ParameterBag {#35 ▼
    #parameters: array:10 [▼
      "id" => null
      "title" => null
      "abstract" => null
      "body" => null
      "category" => null
      "beg_date" => null
      "end_date" => null
      "close_date" => null
      "receive_registration" => null
      "diaporama_dir" => null
    ]
  }
  +query: Symfony\Component\HttpFoundation\InputBag {#51 ▶}
  +server: Symfony\Component\HttpFoundation\ServerBag {#47 ▶}
  +files: Symfony\Component\HttpFoundation\FileBag {#48 ▶}
  +cookies: Symfony\Component\HttpFoundation\InputBag {#46 ▶}
  +headers: Symfony\Component\HttpFoundation\HeaderBag {#49 ▶}
  #content: "{"id":null,"title":null,"abstract":null,"body":null,"category":null,"beg_date":null,"end_date":null,"close_date":null,"receive_registration":null,"diaporama_dir ▶"
  #languages: null
  #charsets: null
  #encodings: null
  #acceptableContentTypes: null
  #pathInfo: "/post"
  #requestUri: "/post"
  #baseUrl: ""
  #basePath: null
  #method: "POST"
  #format: null
  #session: Illuminate\Session\Store {#392 ▶}
  #locale: null
  #defaultLocale: "en"
  -preferredFormat: null
  -isHostValid: true
  -isForwardedValid: true
  -isSafeContentPreferred: null
  basePath: ""
  format: "html"
}

---

在我看来，我遵守了本页给出的指导，但究竟为什么表单的值没有上传到服务器？

在您的代码中，您发送的是表单对象（其中充满空值）。 现在，您可以这样修复它：

updatePost () {
  this.$inertia.post('/post', this.current_post);
}

但很可能你有一个vue警告说不建议编辑道具。 因此，我还建议：

• 您将收到作为当前帖子的帖子道具
• 您应该将其复制到表单对象（挂载时）
• 将所有表单输入链接到表单对象，而不是当前发布

---

我还不能添加注释，但我想补充一点，如果你克隆了一个反应对象，你实际上并没有复制它。克隆对象与原始对象相同，修改此新对象也会修改原始对象，反之亦然。因此，基本上，您正在做的事情与最初遇到麻烦的事情完全相同：修改属性

Vue声明不应修改属性，因为如果父组件修改道具，则更改将消失

Lodash clonedeep从属性创建新对象：

this.items = _.cloneDeep(this.data);

---

dd（$request）到
dd（$request->all（））试试这个谢谢。我现在明白了。可能我有点累了，有点困惑，因为我对一切都是新手。我还有一个问题，关于传递现有的post来初始化表单。此模板用于在全局vue中用于所有帖子的单个帖子组件（我称之为“details”）。我通常应该在data（）中传递它。{返回表单：{id=null，title=This.details.title…}但是由于延迟加载了细节（即帖子列表中的特定帖子），因此在需要时不会刷新数据。此外，使用v-model=“something”不允许我初始化输入字段。我将发布另一个问题。
this.items = _.cloneDeep(this.data);