boldstar
6
13
Vue

Form data post to Laravel backend

Posted 1 month ago by boldstar

Hi, i am trying to submit data to my laravel backend using axios. I need to be able to capture the id of the client that the engagement will be linked to and im struggling to understand how i can access that information so i can send it with the post request.

this is the form component

 <form @submit.prevent="addEngagement" class="d-flex-column justify-content-center">
          <div class="form-group">
            <input type="text" class="form-control mb-3" placeholder="Client" v-model="engagement.client_id">
            <select class="form-control mb-3" id="type" v-model="engagement.return_type">
              <option v-for="type in types" :key="type.id" :value="type">{{ type }}</option>
            </select>
            <input type="text" class="form-control mb-3" placeholder="Year" v-model="engagement.year">
            <input type="text" class="form-control mb-3" placeholder="Assign To" v-model="engagement.assigned_to">
            <input type="text" class="form-control mb-3" placeholder="Status" v-model="engagement.status">

            <button type="submit" class="btn btn-lg btn-primary d-flex justify-content-start">Create</button>
          </div>
        </form>

this is the form component data

engagement: {
        client_id: '',
        return_type: null,
        year: '',
        assigned_to: '',
        status: '',
      },

this is the form component method

 methods: {
    addEngagement(e) {
      if(!this.engagement.client_id || !this.engagement.return_type || !this.engagement.year ){
        return
      } else {
        this.$store.dispatch('addEngagement', {
          id: this.idForEngagement,
          client_id: this.engagement.client_id,
          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')
    },
  },

Now when i capture the data from here it dispatches my store for the method addEngagement below

addEngagement(context, engagement) {
      axios.post('http://traxit.test/api/engagements', {
        id: engagement.id,
        client_id: engagement.client_id,
        return_type: engagement.return_type,
        year: engagement.year,
        assigned_to: engagement.assigned_to,
        status: engagement.status,
        done: false
      })
      .then(response => {
        context.commit('getClientEngagement', response.data)
      })
      .catch(error => {
        console.log(error)
      })

and sends it the laravel backend to my api route here

Route::post('/engagements', '[email protected]');

From here it would be process by the EngagementsController...

So currently i have the the client_id as a basic input but Im wondering if there is away to capture the id of the client i am trying to create the engagement for because in laravel the engagement will have belongsTo() relationship with the client.

The client id is supposed to be referencing my client table and i dont know how to capture that data without having to manually put it in each time before submitting

this is the controller handling the form post

public function store(Request $request)
    {
        $data = $request->validate([
            'client_id' => 'required|integer',
            'return_type' => 'required|string',
            'year' => 'required|string',
            'status' => 'required|string',
            'assigned_to' => 'required|string',
            'done' => 'required|boolean'
        ]);

        $engagement = Engagement::create([
            'client_id' => $request->client_id,
            'return_type' => $request->return_type,
            'year' => $request->year,
            'status' => $request->status,
            'assigned_to' => $request->assigned_to,
            'done' => $request->done,
        ]);

        return response($engagement, 201);
    }

Hopefully I am being detailed enough on what my issue is. Please as for my more clarity if needed!!

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.