Execute a function once when the dropdown is changed

[yakovcohen4]

Execute a function once when the dropdown is changed

• Question
  Can I execute a function once when the dropdown is changed ?

Specs

What version are you using?
Version 2.21.11

What browser?
Chrome browser

Expected Behavior

What did you expect to happen?

I have a filter for a particular column with 3 choices.
When a user changes their dropdown selection, I expect to execute a function once.

Actual Behavior

What actually happened?

Whenever a user changes their selection on the dropdown, the columnFilterFn function is executed on each row in the table.
I would like the function to run only once at the change dropdown.

Steps to Reproduce the Problem

Please detail your steps here

1. I created a dropdown for the column : label - "סטטוס", field - this.fieldFn.
2. When a user changes his selection, the relevant information is shown to him. (the filter work good)
3. The execution of the function this.changeData is performed on each row in the table and not once according to the user's choice.

The code of column :

{
      label: "סטטוס",
      field: this.fieldFn,
      formatFn: this.formatAuthority,
      filterable: true,
      filterOptions: {
           enabled: true, // enable filter for this column
           placeholder: "תואם / לא תואם", // placeholder for filter input
           filterDropdownItems: ["תואם", "לא תואם"], // dropdown (with selected values) instead of text input
           filterFn: this.columnFilterFn, //custom filter function that
      },
},

The code of methods :

    methods: {
        fieldFn(rowObj) {
            return rowObj.success ? rowObj.success : rowObj.errorMessage;
        },
        formatAuthority(value) {
            return value === true ? "תואם" : value;
        },
        columnFilterFn: function (data, filterString) {
            if (filterString === "תואם") {
               this.changeData("תואם");
                return data === true;
            } else {
                this.changeData("לא תואם");
                return (
                    data === "שווי לא תואם" ||
                    data === "תאריך לא תואם" ||
                    data === "בנק לא תואם" ||
                    data === "הלוואה לא קיימת"
                );
            }
        },
    },

image to explain :