DataTable rowEdit is not working

[qwerty3858]

I used the DataTable Row table from PrimeVue's own site. I placed exactly the same, but when editing, it takes all the inputs as the same model and does not save.

My codes.

<template>
            <div class="p-fluid">
              <div class="card">
                <h5>Row Editing</h5>
                <DataTable :value="products2" editMode="row" dataKey="id" v-model:editingRows="editingRows" @row-edit-save="onRowEditSave" responsiveLayout="scroll">
                  <Column field="code" header="Code" style="width:20%">
                    <template #editor="{ data, field }">
                      <InputText v-model="data[field]" autofocus />
                    </template>
                  </Column>
                  <Column field="name" header="Name" style="width:20%">
                    <template #editor="{ data, field }">
                      <InputText v-model="data[field]" />
                    </template>
                  </Column>
                  <Column field="inventoryStatus" header="Status" style="width:20%">
                    <template #editor="{ data, field }">
                      <Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
                        <template #option="slotProps">
                          <span :class="'product-badge status-' + slotProps.option.value.toLowerCase()">{{slotProps.option.label}}</span>
                        </template>
                      </Dropdown>
                    </template>
                    <template #body="slotProps">
                      {{getStatusLabel(slotProps.data.inventoryStatus)}}
                    </template>
                  </Column>
                  <Column field="price" header="Price" style="width:20%">
                    <template #editor="{ data, field }">
                      <InputText v-model="data[field]" />
                    </template>
                  </Column>
                  <Column :rowEditor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></Column>
                </DataTable>
              </div>
            </div>
</template>

<script>
import { ref,onMounted  } from "vue";
import ProductService from "../../service/ProductService";

export default {
  name: "OfferAdd",
  setup() {
    onMounted(() => {
      productService.value.getProductsSmall().then(data => products2.value = data);
    });

    const productService = ref(new ProductService());
    const editingRows = ref([]);

    const products2 = ref(null);
    const statuses = ref([
      {label: 'In Stock', value: 'INSTOCK'},
      {label: 'Low Stock', value: 'LOWSTOCK'},
      {label: 'Out of Stock', value: 'OUTOFSTOCK'}
    ]);

    const onRowEditSave = (event) => {
      let { newData, index } = event;

      products2[index] = newData;
      console.log("newdata",newData)
      console.log("index",index)
      console.log("editingrow",editingRows)
      console.log("event",event)
    };
    const getStatusLabel = (status) => {
      switch(status) {
        case 'INSTOCK':
          return 'In Stock';

        case 'LOWSTOCK':
          return 'Low Stock';

        case 'OUTOFSTOCK':
          return 'Out of Stock';

        default:
          return 'NA';
      }
    };

    const products = ref(null);
    return {   
      products,
      productService, editingRows,  products2, statuses
      , onRowEditSave, getStatusLabel
    };
  },
}
</script>

<style lang="scss" scoped>
::v-deep(.editable-cells-table td.p-cell-editing) {
  padding-top: 0;
  padding-bottom: 0;
}
</style>

[for7raid]

Actual to version 3.7.2 to 3.8.0
you can preproduce it in official code snippet https://codesandbox.io/s/x9mq5

1. Open the snippet
2. Click "Edit" pencil button on any row
3. make changes to row
4. click "Save"

Expected result: changes saved and shown in table
Actual result: changes lost, original data shown

[mertsincan]

Hi,

Thanks a lot for the report. This issue is related to our composition api demo. Please make the following change;

products2.value[index] = newData; // instead of products2[index] = newData; in onRowEditSave method

Best Regards,

[for7raid]

@mertsincan I'm afraid, problem not in the products2.value[index] = newData; code.
onRowEditSave gets the unmodified data, unfortune.

You can simple check your demo to reproduce issue, please.

[qwerty3858]

Thank you very much, my problem is solved. Thank you to everyone who helped.

[mertsincan]

@for7raid Unfortunately, I couldn't replicate this issue. Could you please try the following sample?
https://codesandbox.io/s/amazing-framework-pre75?file=/src/DataTableEditDemo.vue

What steps should I follow to reproduce?

[for7raid]

It seems that breaking changes was made from 3.6 to 3.7 version.
at version 3.6 it was not required to implement save method.

So now I do not need to create "cancel and restore" code. But now I have a problem.
I use typed classed objects, but newData - not my object, just simple {}.

not good(
Please. take a look at my example of usage.

[mertsincan]

Yes, newData is a copy object on 3.8. Please see our doc;
https://primefaces.org/primevue/showcase/#/datatable ('Row Editing' section)
https://github.com/primefaces/primevue/blob/master/CHANGELOG.md#380-2021-10-05 (Breaking Changes)

The main issue for this change; #1273