Use indexOf method with Vuejs

Question

I have a method in my vue js element:

_deleteDesign : function(dsn)
{
    //_deleteDesign
    var url = '{{ url('/fapi/designsTmp/') }}/'+dsn.design_id;
    axios.delete(url)
    .then(function(){ 
        this.$delete(this.creations, this.creations.indexOf(function(el){
            return el.design_id = dsn.design_id;
        }));
    })
    .catch(function(e){
        alert('error deleting design');
    })
    debugger;
}

In this method I am using the indexOf function of Javascript, but vuejs reports me this error in the Chrome debugger:

this.creations.indexOf is not a function

What's the problem?

kaliatech · Accepted Answer · 2019-02-22 13:08:04Z

1

The this context has changed in the promise then handler because of new function declaration. One way to fix, would be to use ES6 arrow function which keeps the existing this binding for code within the function:

       .then(() => { 
             this.$delete(this.creations, this.creations.indexOf(function(el){
                return el.design_id = dsn.design_id;
             }));
          })

edited Feb 22, 2019 at 13:08

answered Feb 22, 2019 at 13:00

kaliatech

18k6 gold badges74 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Goran · Accepted Answer · 2019-02-22 13:14:45Z

0

"indexOf" method can only be executed on variables that are type "string" or "array" (which is actually type "object").

So in your particular case "this.creations" must be either array or string. The issue is that you somehow ended up with the case when "this.creations" is not one of those types.

One possible solution is to add

console.log(typeof this.creations)

and monitor the type of this variable.

Also as previous answer mentioned the issue is that "this" changed context. One solution for this is to make copy of this object: const self = this;

in the beggining of _deleteDesign function and to use "self" object instead of "this". Generally avoid using "this" object as much as possible.

answered Feb 22, 2019 at 13:14

Goran

3,4202 gold badges33 silver badges33 bronze badges

Collectives™ on Stack Overflow

Use indexOf method with Vuejs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related