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

Question

我使用 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>

使用表单显示此模板时，我收到了正确的帖子，其值正确显示在各个输入字段中。

我的控制器目前非常简单：

public function Update(Request $request)
    {
       dd($request);
    }

提交此表单时，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"
}

在我看来，我正在遵守此页面https://inertiajs.com/forms 中给出的指导，但为什么表单的值没有上传到服务器？

Answer 1

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

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

但可能你有一个 vue-warn 说不建议编辑 prop。 所以我还建议以下内容：

• 你收到 post prop 作为 current_post
• 你应该将它复制到你的表单对象（在安装时）
• 将所有表单输入链接到表单对象而不是 current_post

Answer 2

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

Vue 声明你不应该修改一个属性，因为如果父组件修改了一个 prop，你的更改就会消失。

Lodash clonedeep 从属性创建一个新对象：

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