请求不断说数据丢失

Question

我正在建立一个发布食谱的单页应用程序网站。我正在使用Laravel 5.8＆Vue.js

每当我发布食谱时，它总是说成分和方向丢失了。

我已经仔细检查了所有内容，检查是否有错字或其他内容。

我已经在其他项目中完成过一次，我只是复制了代码，并且与其他项目一起运行得很好。

Here's the images of errors and the vuejs console. You can see there that the ingredients and directions isn't null

添加食谱所需的模型

RecipeController.php

public function create()
{
    $form = Recipe::form();

    return response()
        ->json([
               'form' => $form,
          ]);
}

Recipe.php

<?php
namespace App;

use Illuminate\Database\Eloquent\Model;

class Recipe extends Model
{
    protected $fillable = [
        'user_id', 'name', 'slug', 'description', 'category_id',  'thumbnail'
    ];

    public static function form()
    {
        return [
            'name' => '',
            'slug' => '',
            'category_id' => '',
            'description' => '',
            'thumbnail' => '',
            'ingredients' => [
                RecipeIngredient::form()
            ],
            'directions' => [
                RecipeDirection::form(),
                RecipeDirection::form()
            ]
        ];
    }
}

RecipeDirection.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class RecipeDirection extends Model
{
    protected $fillable = [
        'description'
    ];

    public $timestamps = false;

    public static function form()
    {
        return [
            'description' => ''
        ];
    }
}

RecipeIngredient.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class RecipeIngredient extends Model
{
    protected $fillable = [
        'recipe_id', 'name', 'qty', 'description'
    ];

    public $timestamps = false;

    public static function form()
    {
        return [
            'name' => '',
            'qty' => '',
            'description' => ''
        ];
    }
}

**Ingredient**
<div v-for="(ingredient, index) in form.ingredients" v-bind:key="ingredient.id">
    <div>
       <button class="uk-float-right m-t-10 m-b-10" uk-close @click="remove('ingredients', index)" style="font-size: 18px;"></button>
       <div class="uk-grid-small m-t-10" uk-grid>
          <div>
             <input type="text"  class="uk-input uk-input-small m-b-10" v-model="ingredient.qty"  placeholder="Quantity">
          </div>
       <div>
       <input type="text" class="uk-input m-b-10" v-model="ingredient.name" placeholder="Name">
    </div>
    <div>
      <input type="text" class="uk-input" v-model="ingredient.description" placeholder="Description">
    </div>
   </div>
</div>
</div>
//

**Direction**
<div class="m-b-10" v-for="(direction, index) in form.directions" v-bind:key="direction.id">
    <div>
        <button class="uk-align-right m-b-10" uk-close @click="remove('directions', index)" style="font-size: 18px;"></button>
        <textarea type="text" class="uk-textarea" v-model="direction.description" rows="4" placeholder="Description"></textarea>
    </div>
</div>

export default {

        data() {
            return {
                isProcessing: false,
                form: {
                    ingredients: [],
                    directions: []
                },
                categories: [],
                error: null,
                errors: {},
                has_error: null,
                initializeURL: `/admin/recipes/create`,
                storeURL: `/admin/recipes`,
                action: 'create'
            }
        },
        mounted() {
            this.getForm()
        },
        methods: {
            getForm() {
                if (this.$route.meta.mode === 'edit') 
                {
                    this.initializeURL = `/admin/recipes/${this.$route.params.id}/edit`
                    this.storeURL = `/admin/recipes/${this.$route.params.id}?_method=PUT`
                    this.action = 'update'
                }
                this.$http({
                    url: this.initializeURL,
                    method: 'GET'
                }).then((res) => {
                    Vue.set(this.$data, 'form', res.data.form)
                    this.categories = res.data.categories
                })
            },
            save() {
                this.isProcessing = true
                const form = toMultipartedForm(this.form, this.$route.meta.mode)
                this.$http.post(this.storeURL, form)
                    .then((res) => {
                        if (res.data.saved) 
                        {
                            if (this.$route.meta.mode === 'edit') 
                            {
                                this.$router.push(`/admin/recipes/${this.$route.params.id}/show`)   
                            } else {
                                this.$router.push(`/admin/recipes`)
                            }
                            this.$swal({
                                type: 'success',
                                text: res.data.message
                            })
                        }
                    }).catch((err) => {
                        if (err.response.status === 422) 
                        {
                            this.$swal({
                                type: 'error',
                                text: 'An error has occured'
                            })
                            this.error = err.response.data.error
                            this.errors = err.response.data.errors
                            this.has_error = true
                        }
                        this.isProcessing = false
                    })
            },
            addDirection() {
                this.form.directions.push({
                    description: ''
                })
            },
            addIngredient() {
                this.form.ingredients.push({
                    qty: '',
                    name: '',
                    description: ''
                })
            },
            remove(type, index) {
                if (this.form[type].length > 1) {
                    this.form[type].splice(index, 1)
                }
            }
        },

    }