Vue / Laravel - Dynamic multiple form saving data - laravel

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

Answer 1

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;

Answer 2

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