Используйте метод indexOf с Vuejs

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

В этом методе я использую функцию indexOf Javascript, но vuejs сообщает мне об этой ошибке в отладчике Chrome:

this.creations.indexOf не является функцией

В чем проблема?

Answer 1

Метод «indexOf» может выполняться только для переменных типа «строка» или «массив» (на самом деле это тип «объект»).

Так что в вашем конкретном случае «this.creations» долженбыть либо массивом, либо строкой.Проблема в том, что вы каким-то образом оказались в случае, когда «this.creations» не относится к таким типам.

Одним из возможных решений является добавление

console.log(typeof this.creations)

и контролировать тип этой переменной.

Также, как упоминалось в предыдущем ответе, проблема заключается в том, что «это» изменило контекст.Одним из решений этого является создание копии этого объекта: const self = this;

в начале функции _deleteDesign и использование объекта «self» вместо «this».Как правило, избегайте использования этого объекта в максимально возможной степени.

Answer 2

Контекст this изменился в обещании затем обработчике из-за объявления новой функции.Один из способов исправить это - использовать функцию стрелки ES6, которая сохраняет существующую привязку this для кода внутри функции:

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