Как добавить сотрудника в список (таблицу)?

Question

[logdog90]

Пытаюсь добавить сотрудника с таблицу из формы. При добавление в консоли вылетает ошибка - Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'lastname'). Что я делаю не так?

store.js

import axios from 'axios';

export default ({
    actions: {
        async addNewEmployee({ commit }, employee) {
            await axios
                .post(`http://127.0.0.1:8000/api/v1/employees/`, {
                    lastname: employee.lastname,
                    firstname: employee.firstname,
                    number: employee.number
                })
                .then(response => {
                    commit('SET_ADD_EMPLOYEE', response.data)
                })
        },

        async deleteEmployee({ dispatch }, employee) {
            await axios
                .delete(`http://127.0.0.1:8000/api/v1/employees/${employee.id}/`, employee)
                .then(response => {
                    dispatch('getEmployees', response.data)
                })
        }
    },

    mutations: {
        SET_ADD_EMPLOYEE(state, employee) {
            state.employees.unshift(employee)
        },

        SET_ID(state, employee) {
            state.id = employee
        },

        SET_LASTNAME(state, employee) {
            state.lastname = employee
        },

        SET_FIRSTNAME(state, employee) {
            state.firstname = employee
        },

        SET_NUMBER(state, employee) {
            state.number = employee
        },
    },

    state: {
        lastname: null,
        firstname: null,
        number: null,
    },

    getters: {
        lastname: (state) => state.lastname,
        firstname: (state) => state.firstname,
        number: (state) => state.number,
    }
})

form.vue

<template>
    <form @submit.prevent="addNewEmployee(employee)" class="modal-form">
        <div class="py-2">
            <input type="text" placeholder="Фамилия" class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                v-model="lastname">
            <input type="text" placeholder="Имя" class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                v-model="firstname">
            <input type="text" placeholder="Внутрнний" class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
                v-model="number">
        </div>
        <button
            class="focus:outline-0 bg-sky-500 text-white py-2 px-3 hover:bg-sky-700 transition duration-500 ease-out">Добавтить</button>
    </form>
</template>

<script>
import { mapActions } from 'vuex'

export default {
    name: 'form',
    methods: {
        ...mapActions(['addNewEmployee'])
    },
    computed: {
        lastname: {
            get() {
                return this.$store.getters.lastname
            },
            set(employee) {
                return this.$store.commit('SET_LASTNAME', employee)
            }
        },

        firstname: {
            get() {
                return this.$store.getters.firstname
            },
            set(employee) {
                return this.$store.commit('SET_FIRSTNAME', employee)
            }
        },

        number: {
            get() {
                return this.$store.getters.number
            },
            set(employee) {
                return this.$store.commit('SET_NUMBER', employee)
            }
        }
    }
}
</script>

Answer 1

[0xD34F]

Cannot read properties of undefined (reading 'lastname')

Понятно, смотрим, где есть попытка чтения свойства lastname.

async addNewEmployee({ commit }, employee) {
    await axios
        .post(`http://127.0.0.1:8000/api/v1/employees/`, {
            lastname: employee.lastname,

Тоже понятно, смотрим, где вызывается addNewEmployee и что туда передаётся.

@submit.prevent="addNewEmployee(employee)"

А вот здесь непонятно - что такое employee? Такого свойства в компоненте нет. Надо добавить. Его содержимым будет то, что сейчас находится в хранилище - firstname, lastname, number - там, в хранилище, этим данным делать нечего.

Comments

[logdog90]

Огромное спасибо!