title: Foreign key on post request Laravel & Vue
body: <p>I am using a larvel backend with a vue frontend. They are connected by API. I have been trying to figure out how i can correctly submit a form for a model that has a <code>foreign_key</code> relationship with a parent model. </p>
  
  <p>Here is the relationships</p>
  
  <ol>
  <li>A User has many Tasks</li>
  <li>A Task belongs to User</li>
  <li>A Client has many Engagements</li>
  <li>A Engagement belongs to Client</li>
  <li>Engagements and Tasks have many to many</li>
  <li>User and Client have no direct relationship</li>
  </ol>
  
  <p>So I know that if i wanted to submit a post request for data that had a relationship with user It would be simple to assign the foreign_key like below</p>
  
  <p>*Example</p>
  
  <pre><code>public function store(Request $request)
      {
          $data = $request-&gt;validate([
              'title' =&gt; 'required|string',
              'completed' =&gt; 'required|boolean',
          ]);
          $todo = Todo::create([
              'user_id' =&gt; auth()-&gt;user()-&gt;id,
              'title' =&gt; $request-&gt;title,
              'completed' =&gt; $request-&gt;completed,
          ]);
          return response($todo, 201);
      }
  </code></pre>
  
  <p>But when i try to do this same thing for my client I get a 500 internal server error..</p>
  
  <p>So here is the Workflow</p>
  
  <p>On my vue frontend in the AddEngagment.vue component</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="page-wrapper mt-1"&gt;
      &lt;div class="add-engagement container"&gt;
        &lt;div class="card-body bg-light border-primary mb-2"&gt;
          &lt;h4 class="text-left text-primary m-0"&gt;&lt;i class="mr-3 far fa-folder-open"&gt;&lt;/i&gt;New Engagement&lt;/h4&gt;
        &lt;/div&gt;
          &lt;form @submit.prevent="addEngagement" class="d-flex-column justify-content-center"&gt;
            &lt;div class="form-group"&gt;
              &lt;select class="form-control mb-3" id="type" v-model="engagement.return_type"&gt;
                &lt;option v-for="type in types" :key="type.id" :value="type"&gt;{{ type }}&lt;/option&gt;
              &lt;/select&gt;
              &lt;input type="text" class="form-control mb-3" placeholder="Year" v-model="engagement.year"&gt;
              &lt;input type="text" class="form-control mb-3" placeholder="Assign To" v-model="engagement.assigned_to"&gt;
              &lt;input type="text" class="form-control mb-3" placeholder="Status" v-model="engagement.status"&gt;
  
              &lt;button type="submit" class="btn btn-lg btn-primary d-flex justify-content-start"&gt;Create&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;  
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  
  export default {
    name: 'add-engagement',
    data() {
      return {
        engagement: {
          return_type: null,
          year: '',
          assigned_to: '',
          status: '',
        },
        types: [ 
          'Choose Return Type...', 
          '1040', 
          '1120',
        ],
      }
    },
     methods: {
      addEngagement(e) {
        if(!this.engagement.return_type || !this.engagement.year ){
          return
        } else {
          this.$store.dispatch('addEngagement', {
            id: this.idForEngagement,
            return_type: this.engagement.return_type,
            year: this.engagement.year,
            assigned_to: this.engagement.assigned_to,
            status: this.engagement.status,
          })
          e.preventDefault();
        }
        e.preventDefault();
        this.engagement = "" 
        this.idForEngagement++
        this.$router.push('/engagements')
      },
    },
    created: function() {
      this.engagement.return_type = this.types[0]
    },
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I am capturing the data in the input and then dispatching the store for the addEngagement action</p>
  
  <p>Now in the URL for the AddEngagement.vue component I have the client_id shown like below</p>
  
  <pre><code>add-engagement/{client_id}
  </code></pre>
  
  <p>This is the store.js action for the addEngagement</p>
  
  <pre><code>addEngagement(context, engagement) {
        axios.post(('/engagements'), {
          return_type: engagement.return_type,
          year: engagement.year,
          assigned_to: engagement.assigned_to,
          status: engagement.status,
          done: false
        })
        .then(response =&gt; {
          context.commit('getClientEngagement', response.data)
        })
        .catch(error =&gt; {
          console.log(error)
        })
      },
  </code></pre>
  
  <p>So from here, it sends the request to my /engagement on the laravel api route file like below</p>
  
  <pre><code>Route::post('/engagements', 'EngagementsController@store');
  </code></pre>
  
  <p>And then goes to the EngagementsController to run the store method below</p>
  
  <pre><code>public function store($client_id, Request $request)
      {
          $data = $request-&gt;validate([
              'return_type' =&gt; 'required|string',
              'year' =&gt; 'required|string',
              'status' =&gt; 'required|string',
              'assigned_to' =&gt; 'required|string',
              'done' =&gt; 'required|boolean'
          ]);
  
          $engagement = Engagement::create([
              'return_type' =&gt; $request-&gt;return_type,
              'year' =&gt; $request-&gt;year,
              'assigned_to' =&gt; $request-&gt;assigned_to,
              'status' =&gt; $request-&gt;status,
              'done' =&gt; $request-&gt;done,
              + [
                  'client_id' =&gt; $client_id
              ]
          ]);
  
          return response($engagement, 201);
      }
  </code></pre>
  
  <p>At this point is where I am getting my error and I think it has to do with the <code>$client_id</code> which I have tried many different ways of formatting it with no success. When the URL is storing the <code>client_id</code> on the front end for the post request I do not know how that data is getting shared with laravel for it to know which client the <code>client_id</code> foreign key will be assigned to. </p>