Vue.js Update data from my table

Asked

Viewed 286 times

2

I have a table that is filled in at the moment my screen loads, in this table I have listed all my corrections, I have a delete action for this correction, it deletes right because when I update the screen with F5 the data is no longer there, But I wanted when the user deleted the value to be gone. However in this same window I have another table of essays and there has to appear in this window the wording that before belonged to this correction.

That’s why I was trying to get him to force load the screen again. How do I do this?

<b-table
  :data="redacaos[1]"
  :paginated="true"
  :per-page="10"
  :hoverable="true"
  :checkable="true"
>
  <template slot-scope="props">
    <!-- colunas-->

    <b-table-column
      label="Corrigida em"
    >{{ formatData(props.row.created_at, 'DD/MM/YYYY - HH:MM') }}</b-table-column>

    <b-table-column label="Número Da Redação">{{ props.row.redacao.numero }}</b-table-column>

    <b-table-column label="Aluno">{{ props.row.redacao.aluno.name }}</b-table-column>

    <b-table-column label="Proposta">{{ props.row.proposta }}</b-table-column>

    <b-table-column label="Grade">{{ props.row.grade }}</b-table-column>

    <b-table-column label="Escola">{{ props.row.redacao.escola }}</b-table-column>

    <b-table-column label="Nota Final">{{ props.row.nota_final }}</b-table-column>

    <b-table-column field="actions" label="Ações" width="180" centered>
      <!-- detalhes -->
      <b-tooltip label="Detalhes" position="is-top" type="is-dark">
        <button
          class="button is-primary is-round"
          id="info"
          @click="correcaoInfo(props.row.id), isCardModalActive2 = true"
        >
          <b-icon icon="eye"></b-icon>
        </button>
      </b-tooltip>

      <!-- deletar -->
      <b-tooltip label="Deletar" position="is-top" type="is-dark">
        <button
          class="button is-primary is-round"
          id="delete"
          @click="deletarCorrecao(props.row.id)"
        >
          <b-icon icon="delete-outline"></b-icon>
        </button>
      </b-tooltip>
    </b-table-column>
  </template>
</b-table>

correction deleting function:

deletarCorrecao(cuuid) {
      if (confirm("Você realmente deseja excluir essa correção?")) {
        this.isLoading = true;
        CorrecaoService.Delete(cuuid)
          .then(() => {
            this.$buefy.toast.open({
              duration: 5000,
              message: "Deleção realizado com sucesso!",
              position: "is-top-right",
              type: "is-success"
            });
            this.$router.push({ name: 'admin/redacao', params: { }});
          })
          .catch(() => {})
          .finally(() => {
            this.isLoading = false;
          });
      }
    },
  • 1

    Is your function that loads the information inside the created ? If yes, isolate it in a separate method, and at the time of @click delete, you call the search function again. If it is in another method, you can send this. $Emit('Reload'), to the component that has the responsibility to execute this query.

  • Rodrigo Nantes thank you very much, very simple and solved what I needed.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.