How to get the updated data in real time without refreshing

Question

This is my Quasar Table

<q-table
    flat
    bordered
    title="Category"
    :data="categories"
    :columns="columns"
    row-key="id"
  >
    <template v-slot:top-right="props">
      <q-input outlined dense debounce="300" placeholder="Search">
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>

      <div class="q-pa-sm q-gutter-sm"></div>
      <q-btn
        @click="addProductForm"
        outline
        color="white"
        text-color="black"
        icon-right="add"
        label="Add Category"
      />
    </template>

    <template v-slot:body="props">
      <q-tr :props="props">
        <q-td
          v-for="col in props.cols.filter(col => col.name !== 'Actions')"
          :key="col.name"
        >
          {{ col.value }}
        </q-td>
        <td key="Actions">
          <q-btn
            dense
            flat
            color="primary"
            field="edit"
            icon="edit"
            @click="
              editCategoryName(props.row, categories.indexOf(props.row))
            "
          />
          <q-btn dense flat color="negative" field="delete" icon="delete" />
        </td>
        <!-- https://stackoverflow.com/questions/56569707/how-do-i-identify-the-cell-selected-in-a-quasar-table -->
      </q-tr>
    </template>
  </q-table>

my edit Dialog

    <q-dialog
  v-model="editCategoryForm"
  transition-show="slide-up"
  transition-hide="slide-down"
>
  <q-card style="width: 700px; max-width: 80vw;">
    <q-card-section>
      <div class="text-h6">Edit Category</div>
    </q-card-section>
    <div class="q-pa-md">
      <q-input
        outlined
        v-model="edit.categoryName"
        label="Category name"
        lazy-rules
        :rules="[
          val => (val && val.length > 0) || 'Please add a Category name'
        ]"
      />

      <div class="q-ma-md float-right">
        <q-btn label="Cancel" @click="closeModalEdit" />
        <q-btn
          class="q-ml-md "
          color="secondary"
          @click="editCategory"
          :disabled="isEditing"
          :loading="isEditing"
          >{{ isEditing ? "Editing..." : "Edit" }}</q-btn
        >
      </div>
    </div>
  </q-card>
</q-dialog>

The data returns (in editing edit)

  return {
      addCategoryForm: false,
      editCategoryForm: false,
      categoryName: "",
      edit: {
        categoryName: ""
      },
      editIndex: -1,
      editId: "",
      editMode: false,
      isEditing: false,

my Edit method

editCategory() {
  if (this.edit.categoryName.trim() == "") {
    (this.editCategoryForm = false),
      this.$q
        .dialog({
          title: "Incomplete Details",
          message: "Please fill up the category name",
          persistent: true,
          color: "negative"
        })
        .onOk(() => {
          this.editCategoryForm = true;
        });
  } else {
    this.$q
      .dialog({
        title: `Confirm Update ?`,
        persistent: true,
        cancel: true
      })
      .onOk(() => {
        (this.editCategoryForm = true),
          this.$axios({
            method: "post",
            url: "http://127.0.0.1:8000/api/editCategory",
            data: {
              categoryName: this.edit.categoryName,
              id: this.editId // i added id here
            }
          })
            .then(response => {
              // this.edit = response.data;
              // console.log(this.categories);
              this.$q.notify({
                icon: "info",
                message: "Category Updated Successfully",
                color: "positive"
              });
              this.editCategoryForm = false;
            })
            .catch(err => {
              this.$q.notify({
                icon: "error",
                message: err + " " + "Category Update Failed",
                color: "negative"
              });
            });
      });
  }
},

I'm trying to do like this one

and here's what I did yet it doesn't work it needs to be refreshed.

    editCategoryName(name, index) {
  let obj = {
    id: name.id,
    categoryName: name.categoryName
  };
  this.editMode = true;
  this.editCategoryForm = true;
  this.editId = name.id;
  this.edit = obj;
  this.editIndex = index;
  console.log(index); // it get's the index which is good however it doesn't update the data in real // time, it needs to be refreshed
},

inside the editCategoryName when I made this.edit = name

it gives the real time however if you typed something the data is being displayed even without you clicking the edit. (which is a bad practice)

How can I manage to solve this one? Tried everything in google yet nothing.

Answer 1

try with ;)

 this.edit = {...obj}

Using spread will clone your object. Note this will be a shallow copy. it's not officially in the specifications yet. So if you were to use this, you would need to compile it with Babel (or something similar)

Answer 2

You need to create a copy of the object instead of assigning directly to edit variable.

convert

  this.edit = obj;

to

this.edit = JSON.parse(JSON.stringify(obj))

This will work I think.