D
D
Dmitry2020-11-25 21:35:17
Vue.js
Dmitry, 2020-11-25 21:35:17

How to properly edit a form in vue without an extra request to the server?

Good day. Again with a basic question (I’m already starting to boil. I’m doing

the simplest operation - editing the form. There is a table. I press edit. The form opens. And then two-way communication works. And everything that I write in the form fields is immediately displayed in the table.
.
Each time what - something adventures (then when editing, Avoid mutating a prop directly swears.
Now, on the contrary, it edits everything.

No, I can, of course, get data from the server with one more request, but here it’s a matter of principle that I’m doing it wrong in a hurry.

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

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

I already did it through vuex
this.$store.commit('EDIT_ITEM',this.city)and in the form of 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>


How many did - for the first time I encountered such nonsense. It's just that this time you need to implement it without an extra request to the server. Something I'm stuck on the simplest (

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexey Yarkov, 2020-11-25
@yarkov Vue.js

And what for to you this.updif except assignment you do not use it anywhere?

And then there is a two-way connection. and everything that I write in the form fields is immediately displayed in the table

Well, copy this.cityand edit in the form of a copy.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question