Как правильно редактировать форму в vue без лишнего запроса на сервер?

Question

[Дмитрий]

Доброго дня. Снова с базовым вопросом( уже закипать начинаю.

Делаю простейшую операцию - редактирование формы. Есть таблица. Жму edit. Открывается форма. А дальше срабатывает двусторонняя связь. и все, что я пишу в полях формы - сразу отображается в таблице.
.
Каждый раз какие-то приключения( то при редактировании ругается Avoid mutating a prop directly.
Теперь, наоборот, все подряд редактирует.

Нет, я могу конечно еще одним запросом получить данные с сервера, но тут вопрос принципа, что я не так в спешке делаю.

<edit-form :city="city" v-if="editing"> </edit-form>

editRow(rowData) {
this.editing=true;
this.city = this.cities.find(item => item.id == rowData.id);

я уже и через vuex делал
this.$store.commit('EDIT_ITEM',this.city) и в форме computed

item() {
      return this.$store.getters.currentItem
    },

<template>
   <div class="w-1/2">
    <form action="" ref="formData" @submit.prevent>
        <label for="">Название города</label>
        <input type="text" v-model="city.name">
        <label for="">Английский вариант</label>
        <input type="text" v-model="city.engname">
        <button  @click.prevent="saveData">Сохранить</button>
    </form>
   </div>
</template>

<script>
export default {
props:['city'],
data() {
return {
    upd:{}
}
},
methods: {
    saveData() {
        console.log(this.item)
        this.$store.commit("CLEAR_ITEM")
    }
},
 computed: {
     item() {
      return this.$store.getters.currentItem
    },
  },
  mounted() {
      this.upd = this.$store.getters.currentItem
      console.log(this.upd)
  }
}
</script>

Сколько делал - впервые с такой ерундой столкнулся. Просто в этот раз нужно реализовать без лишнего запроса на сервер. Что-то я на простейшем застрял(

Answer 1

[Алексей Ярков]

А зачем Вам this.upd, если кроме присваивания Вы его не используете нигде?

А дальше срабатывает двусторонняя связь. и все, что я пишу в полях формы - сразу отображается в таблице

Ну так копируйте this.city и редактируйте в форме копию.

Comments

[Дмитрий]

да это осталось с разных "попыток". делал копию как раз в upd.
или я неправильно копирую или совсем заработался.

[Дмитрий]

Не знаю, единственный вариант у меня получился это делать новый v-model ... условный cityupd.

и в mounted делать такую копию.

mounted() {
      this.cityupd = JSON.parse(JSON.stringify(this.city))
  }

тогда вроде все работает, но я удивлен, поскольку впервые с таким столкнулся. Кажется где-то ошибаюсь

[Дмитрий]

data() {
return {
    cityupd: this.city}}

я вот так "копировал"... и не работает, но если сделать

cityupd:{
         name: this.city.name,
         engname: this.city.engname
     },

то работает как я ожидаю, но так же бредово все руками прописывать. Этих полей десятки может быть.

не знаю. самая простая операция как-то намного проще все должно решаться.

[Алексей Ярков]

DKWLB, с json.parse норм вариант. Почитайте про то, как в js передаются объекты (по ссылке, а не по значению).

[Дмитрий]

Алексей Ярков, хорошо, почитаю.
да я уже не раз это все проделывал.
придется отступить на время. пол дня угрохал на ровном месте. Тупо теряю время на простейшей реализации.
Все должно быть намного намного проще. Сделаю через запросы на сервер по id и vuex.
Потому что в данном контексте это не срабатывает, если делать одну форму на добавление и редактирование.

Нужно watch добавлять а с ними я так и не разобрался.

[Дмитрий]

В общем вот такая елабуга получилась.
В принципе втупую работает

<edit-form
        :city="city"
        :action="editMode"
        @saveForm="saveForm"
        @cancelEdit ="cancelEdit"
        v-if="editing"> </edit-form>

ну и сама форма. Пришлось навесить еще пару "переключателей".

addRow() {
this.editing=true
this.editMode="addMode"
this.city={}
     },
      editRow(rowData) {
          this.editing=true;
          this.editMode="editMode"
          this.city = this.cities.find(item => item.id == rowData.id);
    },
    saveForm(data) {
         this.editing = false;
    },
    cancelEdit() {
        this.editing = false;
    },

<template>
   <div class="w-1/2">
    <form action="" ref="formData" @submit.prevent>
        <label for="">Название города</label>
        <input type="text" v-model="cityupd.name">
        <label for="">Английский вариант</label>
        <input type="text" v-model="cityupd.engname">
        <button  @click.prevent="saveForm">{{ action=='editMode' ? 'Сохранить' : 'Добавить' }}</button>
        <button  @click.prevent="cancelEdit">Cancel</button>
    </form>
   </div>
</template>

<script>
export default {
props:['city','action'],
data() {
return {
    cityupd: {
        name:this.city.name,
        engname:this.city.engname
    },
}
},
methods: {
    saveForm() {
        this.$emit('saveForm', this.cityupd)
        this.cityupd={};
    },
    cancelEdit(){
        this.$emit('cancelEdit')
        this.cityupd={};
    }
},
watch: {
      	city: function(newVal, oldVal) {
          this.cityupd = newVal
        }
      },
}
</script>

гуанокод по-моему(