CRUD VUE JS PUT METHOD DOESNT WORKS

Question

Why does my edit button in a vue data-table not work? The method creates a new line in the table. I want do edit a line.

template

<!-- DIALOG PARA EDITAR USUARIO -->
<v-dialog v-model="editarDialog">
  <v-card>
    <v-card-title>
      <span class="text-h5">Editar Pessoa</span>
    </v-card-title>

    <v-card-text>
      <v-container>
        <v-row>
          <v-col cols="12" sm="6" md="4">
            <v-text-field
              v-model="pessoa.nome"
              label="Pessoa*"
              required
            ></v-text-field>
          </v-col>
          <v-col cols="12" sm="6" md="4">
            <v-text-field v-model="pessoa.idade" label="Idade*"></v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="blue darken-1" text @click="editarDialog = false">
        Fechar
      </v-btn>
      <v-btn color="blue darken-1" text @click="editarPessoa"> Salvar </v-btn>
    </v-card-actions></v-card
  ></v-dialog
>

script

function botaoEditarPessoa(item) {
  state.pessoa = Object.assign({}, item);
  state.dialog = true;
}

async function editarPessoa() {
  try {
    const res = await axios({
      url: "http://localhost:3000/update",
      method: "put",
      data: state.pessoa,
    });
    state.pessoa = res.data;
    await getData();
    state.dialog = false;
  } catch (error) {
    console.log(error);
  }
}

I need to understand why the line ins't being edited. Please, help me find the error

First of all, welcome to stackoverflow. What this `getData()` does? And can you share more of the data-table component? When do you call `botaoEditarPessoa()` ? — Raphael Marques, Jun 23 '22 at 22:24
@RaphaelMarques async function getData () { try { const res = await axios({ url: 'http://localhost:3000/list', method: 'get' }) — Gabriela V., Jun 24 '22 at 11:59
@RaphaelMarques function botaoEditarPessoa (item) { state.pessoa = Object.assign({}, item) state.dialog = true } Called here: — Gabriela V., Jun 24 '22 at 12:01

score 0 · Answer 1 · answered Jun 24 '22 at 12:23

0

This is probably happening because you're creating a new Object every time you open the model to edit it. Then your put method probably identifies it as a new Pessoa, and instead of editing it, it's creating a new object.

I suggest you look into your PUT method, to see if he's identifying this object as an already created or a new one.

answered Jun 24 '22 at 12:23

Raphael Marques

699
4
16

app.put('/update', (req, res) => { const body = req.body // { id: 1, nome: "fulano de tal", idade: 32323 } const pessoa = pessoas.filter((e) => e.id === body.id) if (pessoa.length > 0) { const index = pessoas.findIndex((e) => e.id === body.id) pessoas[index] = body res.send(pessoas[index]) } else { res.send({ error: "O id da pessoa informada não foi localizado" }) } }) – Gabriela V. Jun 24 '22 at 12:33
Is it correct? @RaphaelMarques – Gabriela V. Jun 24 '22 at 12:33
When you are sending the request to the back end, it's creating a new entry there? That's probably what is happening, otherwise when you run `getData()` it shouldn't bring a new line. – Raphael Marques Jun 24 '22 at 13:37
and on your code, there's no reason to set the response of the PUT method to the `state.pessoa` (`state.pessoa = res.data;`). Because you're calling your endpoint to return the up-to-date list. – Raphael Marques Jun 24 '22 at 13:46
Yes. A new line is being created. But, now look. Still doesnt working async function editarPessoa () { try { await axios({ url: 'http://localhost:3000/update', method: 'put' }) state.dialog = false } catch (error) { console.log(error) } } – Gabriela V. Jun 24 '22 at 14:15
1

The correct code: async function editarPessoa () { try { const res = await axios({ url: 'http://localhost:3000/update', method: 'put', data: state.pessoa }) state.pessoa = res.data console.log(state.pessoa) await getData() state.editarDialog = false } catch (error) { console.log(error) } } And the correct dialog to open : editarDialog Now it works. Thank you for the attention!!! – Gabriela V. Jun 24 '22 at 17:12

CRUD VUE JS PUT METHOD DOESNT WORKS

1 Answers1