Прошу прощения не дописал ещё компонент модального окна!
modal.vue
<template>
<transition name="fade">
<div class="fixed top-0 left-0 w-full h-full z-10 flex justify-center items-center transition duration-300 ease-out"
v-if="SHOW_UPDATE_MODAL"
>
<div
class="fixed top-0 left-0 w-full h-full bg-bgOverLey"
@click="SET_HIDE_UPDATE_MODAL"
>
</div>
<div class="z-20 px-3 py-14 w-1/3 bg-white shadow-shadowForm relative rounded-lg model-content">
<button
class="absolute top-1 right-1 focus:outline-0"
@click="SET_HIDE_UPDATE_MODAL"
>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
class="bi bi-x fill-grey hover:fill-closeColor transition duration-1000 ease-out"
viewBox="0 0 16 16">
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
<form class="modal-form" @submit.prevent="updateEmployee(employee)">
<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="number"
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-lightGreen text-white py-2 px-3 hover:bg-darkGreen transition duration-500 ease-out"
>Изменить</button>
</form>
</div>
</div>
</transition>
</template>
<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'
export default {
name: 'EmployeeModalUpdate',
methods: {
...mapMutations(['SET_HIDE_UPDATE_MODAL', 'SET_ID', 'SET_LASTNAME', 'SET_FIRSTNAME', 'SET_NUMBER', 'SET_EMPLOYEES']),
...mapActions(['updateEmployee']),
// Редактировать
},
computed: {
...mapGetters(['SHOW_UPDATE_MODAL']),
employee() {
return this.$store.state.employee
},
id: {
get() {
return this.$store.getters.GET_ID
},
set(employee) {
return this.SET_ID(employee)
}
},
lastname: {
get() {
return this.$store.getters.GET_LASTNAME
},
set(employee) {
return this.SET_LASTNAME(employee)
}
},
firstname: {
get() {
return this.$store.getters.GET_FIRSTNAME
},
set(employee) {
return this.SET_FIRSTNAME(employee)
}
},
number: {
get() {
return this.$store.getters.GET_NUMBER
},
set(employee) {
return this.SET_NUMBER(employee)
}
},
},
}
</script>
<style lang="sass">
.fade-enter-active
opacity: 0
.fade-leave-active
opacity: 0
</style>
Проблема решена. В файле store.js, в аргументе нужно было передать id
store.js
actions: {
async updateEmployee({ commit }, id, employee) {
const response = await axios.put(`http://127.0.0.1:8000/api/v1/employees/${id}/`, employee )
commit('SET_EMPLOYEES', response.data)
}
}
А также в компоненте form.vue, когда submit-им форму, тоже передаём этот аргумент
form.vue
<form class="modal-form" @submit.prevent="updateEmployee(id, employee)">
<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="number" 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-lightGreen text-white py-2 px-3 hover:bg-darkGreen transition duration-500 ease-out">Изменить</button>
</form>
