Vuetify, vuex реактивно обновляется таблица при обновлении клиента (не должно)

Пытаюсь облегчить немного себе работу, сам я новичок, и работаю через лару + vuejs + vuex. Задача - обновить клиента (адрес, почту и т.п.). Проблема - все работает, но не могу понять, почему при редактировании (без сохранения) реактивно обновляются данные в таблице, этого я бы не хотел, так как после отмены редактирования, не сохраненные данные остаются в таблице. Как работает - обновление клиента происходит через диалоговое окно с формой, при клике на иконку редактирования запускаю "action" и с ним отправляю item (тобишь информацию о текущем клиенте из таблицы) этот item сохраняю в state объект editForm (по умолчанию пустой объект):

<template v-slot:item.actions="{ item }">
  <v-icon @click.prevent="editClient(item)">mdi-pencil</v-icon>
</template>

Далее Action:

export const editClient = ({ commit }, payload) => commit("EDIT_CLIENT", payload);

Мутация:

export const EDIT_CLIENT= (state, payload) => {  state.editClientDialog = true; state.editForm = payload; };

"editForm" использую для редактирования клиента после чего по клику данные отправляются в бэкенд.

Код компонента редактирования клиента:

<template>
<v-row>
 <v-card tile >
   <v-card-title primary-title>Редактирование клиента "{{form.name}}"</v-card-title>
   <v-card-text>
     <v-container>
       <v-row>
         <v-col cols="12" sm="6" md="6">
           <v-text-field
             label="Имя"
             autofocus
             prepend-inner-icon="mdi-account"
             v-model="form.name"
             :error-messages="this.errors ? this.errors.name : ''"
           ></v-text-field>
         </v-col>
         <v-col cols="12" sm="6" md="6">
           <v-text-field
             label="E-Mail"
             type="email"
             prepend-inner-icon="mdi-email"
             v-model="form.email"
             :error-messages="this.errors ? this.errors.email : ''"
           ></v-text-field>
         </v-col>
         <v-col cols="12" sm="6" md="6">
           <v-text-field
             label="Телефон"
             placeholder="+#(###)###-##-##"
             prepend-inner-icon="mdi-phone-in-talk-outline"
             v-model="form.phone"
             v-mask="'+#(###)###-##-##'"
             :error-messages="this.errors ? this.errors.phone : ''"
           ></v-text-field>
         </v-col>
         <v-col cols="12" sm="6" md="6">
           <v-text-field
             label="Населенный пункт"
             prepend-inner-icon="mdi-google-maps"
             v-model="form.city"
             :error-messages="this.errors ? this.errors.city : ''"
           ></v-text-field>
         </v-col>
         <v-col cols="12" sm="4" md="4">
           <v-text-field
             label="Каталог"
             placeholder="#/#"
             prepend-inner-icon="mdi-notebook-outline"
             v-model="form.catalog"
             :error-messages="this.errors ? this.errors.catalog : ''"
           ></v-text-field>
         </v-col>
         <v-col cols="12" sm="4" md="4">
           <v-autocomplete
             :items="parents"
             label="Родитель"
             item-text="name"
             item-value="id"
             prepend-inner-icon="mdi-city-variant"
             :error-messages="this.errors ? this.errors.parent_id : ''"
             v-model="form.parent_id"
           ></v-autocomplete>
         </v-col>
         <v-divider></v-divider>
         <v-row class="mx-3">
<v-btn color="amber accent-4" block dark @click.prevent="updateClient(form)">Редактировать</v-btn>
         </v-row>
       </v-row>
     </v-container>
   </v-card-text>
 </v-card>
</v-row>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
import { mask } from "vue-the-mask";
export default {
name: "EditClientForm",
directives: { mask },
computed: {
 ...mapGetters({
   parents: "client/clients",
   errors: "client/editClientErrors",
 }),
 ...mapState({
   form: state => state.client.editForm
 })
},
methods: mapActions({
 updateClient: "client/updateClient",
})
};
</script>

Думаю проблема возможно в mapState тк форму редактирую напрямую... но не уверен и не знаю как проверить, т.к. в devtools не увидел зацепок.

Ответы (0 шт):