Vue JS - how can I call may data in my filter function of javascript

Question

In our application, I added a validation of each row that you can't have 2 same columns values. I'm done with it but Im having a problem in delete row

Example

There is a delete button in the right side when I clicked it, it gives me an error Cannot read property ..... even tho it is already declared in my data

Error Message

Vue code

    deleteRow(i, e){
    var month                   = this.added_items[i].selected_month.id
    var chart_of_account_id     = this.added_items[i].selected_chart_of_account.id
    var count                   = 0 
    // var duplicate                = false 
    this.submitStatus                                       =   ''
    this.duplicate_month                                     =   false
    this.added_items.filter(function( obj ) {
        console.log(this.submitStatus)
        if((obj.selected_month.id == month && obj.selected_chart_of_account.id == chart_of_account_id) && obj.id != i){
             count++
             if(count >= 2)
             {
                // this.added_items[i].duplicate_month                 =   true
                // this.submitStatus                                   =   'ERROR'
                // this.duplicate_month                                =   true
             }
        }
        return obj.id !== i;

    });
   
   console.log(this.added_items)

    e.preventDefault()
},

Question: How can I call my data inside of my filter function? because when I tried any of these: this.submitStatus/this.added_items[i].duplicate_month/this.duplicate_month it gives me an error

Answer 1

You can approach it in two ways

Option 1: Arrow Functions

this.added_items.filter(( obj ) => {
    console.log(this.submitStatus)

    if(
        (
            obj.selected_month.id == month && 
            obj.selected_chart_of_account.id == chart_of_account_id
        ) && 
        obj.id != i
    ){
       count++
       if(count >= 2)
       {
           // this.added_items[i].duplicate_month                 =   true
           // this.submitStatus                                   =   'ERROR'
           // this.duplicate_month                                =   true
        }
   }

    return obj.id !== i;

});

Option 2: Bind this

this.added_items.filter(function( obj ) {
    console.log(this.submitStatus)

    if(
        (
            obj.selected_month.id == month && 
            obj.selected_chart_of_account.id == chart_of_account_id
        ) && 
        obj.id != i
    ){
        count++
        
        if(count >= 2)
        {
                // this.added_items[i].duplicate_month                 =   true
                // this.submitStatus                                   =   'ERROR'
                // this.duplicate_month                                =   true
        }
    }

    return obj.id !== i;

}).bind(this);