Question

我的vue js元素中有一个方法：

_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;
}

在这种方法中，我使用Javascript的 indexOf 函数，但是vuejs在Chrome调试器中向我报告了此错误：

this.creations.indexOf不是函数

出什么问题了？

Answer 1

由于新的函数声明，{promise then}处理程序中的this上下文已更改。一种解决方法是使用ES6箭头函数，该函数将现有this绑定保留在该函数内的代码中：

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

Answer 2

“ indexOf”方法只能在“ string”或“ array”类型（实际上是“ object”类型）上执行。

因此，在您的特定情况下，“ this.creations”必须为数组或字符串。问题是您最终以某种方式最终遇到了“ this.creations”不是这些类型之一的情况。

一种可能的解决方案是添加

console.log(typeof this.creations)

并监视此变量的类型。

正如先前的答案所提到的，问题在于“此”更改了上下文。一种解决方案是复制此对象： const self = this;

在_deleteDesign函数的开头，并使用“ self”对象代替“ this”。通常，尽量避免使用“此”对象。

在Vuejs中使用indexOf方法

2 个答案: