Сохранение вложенного массива из vuejs в серверную часть Laravel не работает

Question

У меня есть компонент vue, создающий портфель проектов и отправляющий на сервер.Каждый проект имеет много особенностей и технологий, связанных с ним.И у каждого проекта также есть изображение.Я публикую данные с помощью объекта formData ().Проекты хорошо сохраняются в таблице проектов, даже я могу загрузить изображение проекта и сохранить путь вместе с данными проекта.Проблема в том, что я не могу перебрать объекты и технологии подобъектов и сохранить их в соответствующих таблицах.Это мой код:

Vue Component

<template>
<div>
<div class="row">
          <div class="col-md-10">
            <div class="form-group">
              <label>Project Title:</label>
              <input type="text" name="project_title" v-validate="'required|min:3|max:255'" class="form-control" v-model="project.project_title" />

          <div class="help-block alert alert-danger" v-show="errors.has('project_title')">
          {{errors.first('project_title')}}
          </div>

            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-10">
            <div class="form-group">
              <label>Tag line:</label>
              <input type="text" name="tag_line" v-validate="'max:255'" class="form-control" v-model="project.tag_line" />
              <div class="help-block alert alert-danger" v-show="errors.has('tag_line')">
          {{errors.first('tag_line')}}
          </div>

            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-10">
            <div class="form-group">
              <label>Description:</label>

              <textarea v-model="project.project_desc" name="project_desc" class="form-control" v-validate="'required|min:30'"></textarea>
              <div class="help-block alert alert-danger" v-show="errors.has('project_desc')">
          {{errors.first('project_desc')}}
          </div>

            </div>
          </div>
        </div>

         <div class="row">
          <div class="col-md-10">
            <div class="form-group">
              <label>Image:</label>
              <span class="help-block">
              Only images of format JPG,JPEG or PNG allowed.
              </span>
              <input type="file" name ="project_thumb_nail" id="project_thumbnail" class="form-control" v-validate="'required|image|mimes:image/jpeg,image/jpg,image/png|size:10000'" @change="getProjectImage" />
              <div class="help-block alert alert-danger" v-show="errors.has('project_thumbnail')">
          {{errors.first('project_thumbnail')}}
          </div>

            </div>
          </div>
        </div>   

        <div class="row">
          <div class="col-md-10">
            <div class="form-group">
              <label>URL:</label>
              <input type="url" name="url" v-validate="'url'" class="form-control" v-model="project.url" />
              <div class="help-block alert alert-danger" v-show="errors.has('url')">
          {{errors.first('url')}}
          </div>

            </div>
          </div>
        </div>                 
          <hr>
       <h4>Features <small>Add Key Features in this project</small></h4>
          <ol>
          <li v-for="f in features">{{f.feature}}</li>
          </ol>
          <hr>
          <div class="row">
          <div class="col-md-10">
            <div class="form-group" v-for="feature in features">
            <input v-model="feature.feature" name="feature" v-validate="'required|max:255'">
            <div class="help-block alert alert-danger" v-show="errors.has('feature')">
          {{errors.first('feature')}}
          </div>
            <br>
            <hr>
            </div>
<button @click="AddFeature" class="btn btn-default">
    Add Feature
  </button>
            </div>
            </div>

        <br />
        <hr>

        <h4>Technologies</h4>
       <hr>
        <h4><small>Select Technologies used in this project</small></h4>
        <div class="row">
          <div class="col-md-10">
          <div v-for="(tech,index) in technologies">
          <input type="radio" :value="tech.id" id=":tech.technology" v-model="selectedTechs[index]" @click="addToTechnologies">
          <label for=":tech.technology">{{tech.technology}}</label>
          </div>

            </div>
            </div>
            <br>
            <hr>
      <button class="btn btn-success" @click="addProject">Save</button>
</div>
</div>
</template>
<script>
export default
{
name:'CreateProject',
  data(){
        return{

          project:{features:[],        
          },
          features:[],
          technologies:[],
         selectedTechs:[],
         selectedTechnologies:[],
         feature:{},
          project_picture:null

        }
    },


    beforeMount: function()
        {
        this.fetchTechnologies();

        },

        methods:
        {

    fetchTechnologies()
    {
    return this.axios.get('technologies').then((res)=>{
    this.technologies=res.data;
    })
    },

     addToTechnologies()
    {
        this.selectedTechnologies.push(this.selectedTechs); 


    },

     getProjectImage(event)
    {
    let files = event.target.files;
               if (files.length) 
                this.project_picture = files[0];

    },

     AddFeature()
    {
    this.features.push({ feature: '' });
   this.project.features.push(this.features);
   console.log(this.project.features)
    },



     addProject(){

    const fd = new FormData();        
        fd.append('project_thumbnail',this.project_picture,this.project_picture.name)
       fd.append('project_title',this.project.project_title)
       fd.append('tag_line',this.project.tag_line)
       fd.append('project_desc',this.project.project_desc)
       fd.append('url',this.project.url)
       //Append array of technologies to formData object
       fd.append('technologies',this.project.technologies)
       //Append features array to formData ovject
       fd.append('features',this.project.features)

       //Post the formData object to server
        return this.axios.post('projects',fd).then((response) => {

          console.log(response.data)


        })
    },



        }
}
</script>

Laravel Backend

//upload project thumbnail
    $path ='';
if($request->hasFile('project_thumbnail')) 
      {
        $pic = $request->file('project_thumbnail');
        $path = $pic->store('images/projects');

         $thumbnailName = Date('YMdhis');
        $pic->move(public_path('images/projects'), $thumbnailName);

    }
    // Now save the projects to projects database model

    //This works just fine
      $project = new Project;

    $project->project_title = $request->project_title;
    $project->tag_line = $request->tag_line;
    $project->project_desc = $request->project_desc;
    $project->project_thumbnail = $path;
    $project->url = $request->url;
    $project->save();

    //Now iterate in features object and save each feature in project features table

    $features = $request->features;

    for($i=0;$i<count($features);$i++)
    {
        $feature = new ProjectFeature;
        $feature->project_id = $project->id;
        $feature->feature = $features[$i];
        $feature->save();
    }

    //The above code does not work. returns internal server error 500. 
    //Have also tried to push posted features in an array variable like this:
    $featuresArray = [];
     $featuresArray = array_push( $featuresArray,$features);
     //Also return the same error
     //when I return the of $request->features to the client, it returns something like [object,object...]
     //When I try to check if $request-features is an array at server site, the client site again returns internal server error.

Я был в стеке длякакое-то время, и я ищу помощь.Если у вас есть идея, как мне поступить с этим делом, пожалуйста, помогите.