How to ask for a confirmation when updating or deleting datas?

Question

my situation is the following:

I use an el-table component with datas fetch from an api. I put those datas in a computed property so that I can sort, filter and paginate my table. Now, I have also created a column to edit or delete a row. The edit button open an el-form with the buttons "cancel" and "confirm". The delete button leads to a confirmation pop.

My problem is that even though the datas get updated, I need to click on another row for it to be seen. For some reason, when i just put raw datas (no api, no computed, no sorting, ...) the edit and delete buttons work perfectly. Also If I don't ask confirmation for the buttons, it works (but then I can't cancel the edit nor the delete).

How can I update or delete the datas without having to click outside the fields?

Here are the computed datas:

computed: {
    displayData() {
      if (this.search === null) return this.data;
      this.filtered = this.data.filter(
        (data) =>
          !this.search ||
          this.searchBy.some((item) =>
            data[item]
              .toString()
              .toLowerCase()
              .includes(this.search.toLowerCase())
          )
      );

      this.total = this.filtered.length;
      if (this.order === "+name")
        this.filtered.sort((a, b) => a.name.localeCompare(b.name));
      else if (this.order === "-name")
        this.filtered.sort((a, b) => -1 * a.name.localeCompare(b.name));

      return this.filtered.slice(
        this.perPage * this.currentPage - this.perPage,
        this.perPage * this.currentPage
      );
    },
  },

And here are the methods of the buttons (edit, confirm and delete):

methods: {
  handleUpdate(row) {
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
  updateData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const index = this.displayData.findIndex(
            (v) => v.code === this.temp.code
          );

          this.displayData.splice(index, 1, this.temp);
          this.dialogFormVisible = false;
          this.$notify({
            title: "Success",
            message: "Update Successfully",
            type: "success",
            duration: 1000,
          });
        }
      });
    },
  handleDelete(row, index) {
      this.$confirm(`Are you sure to delete  ${row.name}?`, {}).then(() => {
        this.displayData.splice(index, 1);
        this.$notify({
          title: "Success",
          message: "Delete Successfully",
          type: "success",
          duration: 1000,
        });
      });
    },
},

Answer 1

displayData is a computed property in your code - computed properties are not writable unless they have a setter. Either provide a setter or update the data array directly rather than the computed property.