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 не увидел зацепок.