ajsmith_codes's avatar

Vue warn: Duplicate keys detected.

Here is my vue:

Employee Table

Add New Employee # Name Hire Date DOB Eligible for Pto
                            <th>
                                Salary
                            </th>
                            <th>
                                Active
                            </th>
                            <th>
                                Modify
                            </th>
                        </tr>
                        <tr v-for="employee in employees"
                            :key="employee.id">

                            <td>
                                {{
                                    employee.employee_num
                                }}
                            </td>
                            <td>

                                {{
                                    employee.name
                                }}

                            </td>
                            <td>
                                {{
                                    employee.hire_date
                                        |
                                        myDate
                                }}
                            </td>
                            <td>
                                <p v-if="employee.dob">
                                    {{
                                        employee.dob
                                            |
                                            myDate
                                    }}
                                </p>
                                <p v-else>

                                </p>
                            </td>
                            <td>
                                <p v-if="employee.eligible_for_pto">
                                    Yes
                                </p>
                                <p v-else>
                                    No
                                </p>
                            </td>

                            <td>
                                <p v-if="employee.salary">
                                    Yes
                                </p>
                                <p v-else>
                                    No
                                </p>
                            </td>

                            <td>
                                <p v-if="employee.active">
                                    Yes
                                </p>
                                <p v-else>
                                    No
                                </p>
                            </td>

                            <td>
                                <a href="#"
                                   @click.prevent="editModal(employee)">
                                    <font-awesome-icon
                                        icon="edit"></font-awesome-icon>
                                </a>
                                /
                                <a href="#"
                                   @click.prevent="deleteEmployee(employee.id)">
                                    <font-awesome-icon
                                        icon="trash"></font-awesome-icon>
                                </a>

                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->

            </div>
            <!-- /.card -->
        </div>
    </div>

    <!-- Modal -->
    <div
        class="modal fade"
        id="addNew"
        tabindex="-1"
        role="dialog"
        aria-labelledby="addNewLabel"
        aria-hidden="true">
        <div
            class="modal-dialog modal-dialog-centered"
            role="document">
            <div
                class="modal-content">
                <div
                    class="modal-header">
                    <h5 class="modal-title"
                        v-show="editmode"
                        id="addNewLabel">
                        Update
                        Employee's
                        Info</h5>

                    <h5 class="modal-title"
                        v-show="!editmode"
                        id="addNewLabel">
                        Add
                        Employee
                    </h5>
                    <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-label="Close">
                        <span
                            aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form
                    @submit.prevent="editmode ? updateEmployee() : createEmployee()">

                    <div
                        class="modal-body">

                        <div
                            class="form-group">

                            <div
                                v-if="!editmode">
                                <select
                                    class='form-control shadow'
                                    v-model='form.user_id'
                                    v-show="!editmode"
                                >
                                    <option
                                        disabled>
                                        Select
                                        One
                                    </option>
                                    <option

                                        v-for='user in users'
                                        :key="user.id"
                                        :value="user.id"
                                    >
                                        {{
                                            user.name
                                        }}
                                    </option>
                                </select>
                                <has-error
                                    :form="form"
                                    field="user_id"></has-error>
                            </div>
                            <div
                                v-else>
                                Employee
                                Name

                                <input
                                    disabled
                                    id="name"
                                    v-model="form.name"
                                />
                            </div>

                        </div>

                        <div
                            class="form-group">
                            <label>
                                Employee
                                Number
                            </label>

                            <input
                                v-model="form.employee_num"
                                type="number"
                                name="employee_num"
                                placeholder="Employee number"
                                class="form-control"
                                :class="{ 'is-invalid': form.errors.has('employee_num') }">
                            <has-error
                                :form="form"
                                field="employee_num"></has-error>
                        </div>

                        <div
                            class="form-group">
                            <label>
                                Hire
                                Date
                            </label>

                            <input
                                v-model="form.hire_date"
                                type="date"
                                name="hire_date"
                                placeholder="Hire Date"
                                class="form-control"
                                :class="{ 'is-invalid': form.errors.has('hire_date') }">
                            <has-error
                                :form="form"
                                field="hire_date"></has-error>
                        </div>

                        <div
                            class="form-group">
                            <label>
                                DOB
                            </label>

                            <input
                                v-model="form.dob"
                                type="date"
                                name="dob"
                                placeholder="Date of Birth"
                                class="form-control"
                                :class="{ 'is-invalid': form.errors.has('dob') }">
                            <has-error
                                :form="form"
                                field="dob"></has-error>
                        </div>

                        <div
                            class="form-group">
                            <label>
                                Eligible
                                for
                                PTO
                            </label>

                            <select
                                class='form-control shadow'
                                v-model='form.eligible_for_pto'
                                id="eligible_for_pto">
                                <option
                                    disabled>
                                    Select
                                    One
                                </option>
                                <option
                                    value="1"
                                >
                                    Yes
                                </option>
                                <option
                                    value="0">
                                    No
                                </option>
                            </select>
                        </div>
                        <has-error
                            :form="form"
                            field="eligible_for_pto"></has-error>

                        <div
                            class="form-group">
                            <label>
                                Salary
                            </label>

                            <select
                                class='form-control shadow'
                                v-model='form.salary'
                                id="salary">
                                <option
                                    disabled>
                                    Select
                                    One
                                </option>
                                <option
                                    value="1"
                                >
                                    Yes
                                </option>
                                <option
                                    value="0">
                                    No
                                </option>
                            </select>
                        </div>
                        <has-error
                            :form="form"
                            field="salary"></has-error>

                        <div
                            class="form-group">
                            <label>
                                Active
                            </label>

                            <select
                                class='form-control shadow'
                                v-model='form.active'
                                id="active">
                                <option

                                    disabled>
                                    Select
                                    One
                                </option>
                                <option
                                    value="1"
                                >
                                    Yes
                                </option>
                                <option
                                    value="0">
                                    No
                                </option>
                            </select>
                        </div>
                        <has-error
                            :form="form"
                            field="active"></has-error>

                    </div>
                    <div
                        class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-danger"
                            data-dismiss="modal">
                            Close
                        </button>
                        <button
                            v-show="editmode"
                            type="submit"
                            class="btn btn-success">
                            Update
                        </button>
                        <button
                            v-show="!editmode"
                            type="submit"
                            class="btn btn-primary">
                            Create
                        </button>
                    </div>

                </form>

            </div>
        </div>
    </div>
</div>

And here are the two controller methods:

public function getEmployees()
{

    $employees = DB::table('employees')
        ->leftJoin('users', 'employees.user_id', '=', 'users.id')
        ->get();

    //save for example/reference
  //  $employees = Employees::with('users:id,name')->get();

    return response()->json($employees);

}

public function getUsers()
{

    $users = DB::table('users')
        ->leftJoin('employees', 'employees.user_id', '=', 'users.id')
        ->where('employees.user_id', '=', null)
        ->get();

    return response()->json($users);

}
0 likes
1 reply
ajsmith_codes's avatar
ajsmith_codes
OP
Best Answer
Level 5

Nevermind, I figured it out. I had to change employee.id to index.

Please or to participate in this conversation.