Vue / Laravel - Dynamic multiple form saving data

0
votes

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();
    }
  }
2
laravelvue.js

2 Answers

0
votes

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;
0
votes

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) });
}