Vue / Laravel - Dynamic multiple form saving data

Question

I have a dynamic form that successfully adds multiple field by a click of the button. My problem comes when saving the data in the database. I want to be able to save in the employee_id field the id of the Auth::user.

This is my current set of code. Should I use a different approach such as for loop instead of foreach?

Component.vue

           <tr v-for="(row, index) in rows" :key="row.id">
              <td><base-select
                :items="department_objectives"
                item-text="department_objective" 
                item-value="id" 
                label="Department Objectives"
              /></td>
              <td><v-textarea label="KPA" placeholder=" " class="mr-2" rows="1" outlined v-model="row.kpa" /></td>
              <td><v-textarea label="KPI" placeholder=" " class="mr-2" rows="1" outlined v-model="row.kpi" /></td>
              <td><v-text-field label="Weight" placeholder=" " class="mr-2" outlined  v-model="row.weight" /></td>
              <td><v-text-field label="Score" placeholder=" " class="mr-2" outlined :disabled="disabled" filled v-model="row.score" /></td>
              <td><a @click="removeElement(index);" style="cursor: pointer">Remove</a></td>
           </tr>

 addRow () {
        this.rows.push({
          kpa: '',
          kpi: '',
          weight: '',
          score: '',
          equal: '',
        });

 save () {
        axios
        .post('/api/employee-objective', { data: this.rows })
        .then(res => { console.log(res) })
        .catch(err => { console.log(err) });
      }

Controller.php

  public function store(Request $request) {
        foreach($request->data as $data) {
        $container = EmployeeObjective::updateOrCreate([
          'employee_id' => // insert ID
          'kpa_info' => $data['kpa'],
          'kpi_info' => $data['kpi'],
          'kpa_weight' => $data['weight'],
          'kpa_score_1' => $data['score'],
          'kpa_equal' => $data['equal'],
      ]);
      $container->save();
    }
  }

Qonvex620 · Accepted Answer · 2020-01-20 03:02:42Z

0

It's fine using foreach as long all data you want is available like the key

to put the id of authenticated user in employee_id just put this one

Auth::id();

and put it above your code

use Auth;

edited Jan 20, 2020 at 3:02

answered Jan 20, 2020 at 2:07

Qonvex620

3,9801 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jim E Russel Over a year ago

I tried using both of these syntax and I'm having a post error 500. 'employee_id' => $data[Auth::id()], and 'employee_id' => Auth::id(),

Jim E Russel Over a year ago

It is still not working. Probably because it is not included inside the v-for syntax, but type=hidden is not working in vue.

Qonvex620 Over a year ago

No, v-for has no effect on that, your just assigning the id of the authenticated user inthe employee_id right ?

Jim E Russel Over a year ago

Yes sir. I wanted to input the id of authenticated user to every row that will be generated by v-for.

Qonvex620 Over a year ago

then what's the error ? I think I already gave you the solution

|

Jim E Russel · Accepted Answer · 2020-01-20 07:45:26Z

I managed to make it work, somehow this syntax works. Hopefully someone could enlighten me more about this.

Controller.php

    public function store(Request $request) 
    // This works
    foreach($request->rows as $data) {
      $test = new EmployeeObjective;
      $test->employee_id = $request->id;
      $test->kpa_info = $data['kpa'];
      $test->save();

    // This does not work
    foreach($request->rows as $data) {
      EmployeeObjective::updateOrCreate([
     'employee_id' => $request->id,
     'kpa_info' => $data['kpa'],

Now here is the tricky part. I saved the data from the $store to my local object and passed it during the save method.

Component.vue

created () {
  this.auth = this.$store.state.authUser.id
},

save () {
  axios.post('/api/employee-objective', { 
    rows: this.rows, 
    id: this.auth
  })
  .then(res => { console.log(res) })
  .catch(err => { console.log(err) });
}

Collectives™ on Stack Overflow

Vue / Laravel - Dynamic multiple form saving data

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related