Это магия callback-ов? [дубликат]

111

30 января 2021, 04:00

На этот вопрос уже даны ответы здесь:

Потеря контекста вызова (5 ответов)

Закрыт 1 год назад.

Работаю с Vuejs, наткнулся скорей всего на магию callback-ов, как мне кажется.

const steps = new Vue({ 
  el: '#app', 
  data: { 
    steps: stepsList, 
    currentStep: 0, 
    prevStep: function() { 
      // wtf is here 
      console.log(this, steps) 
    }, 
  } 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<button class="prev-btn" @click="prevStep">Назад</button>

Вот небольшая часть кода с которой имеются проблемы. Не могу понять, почему this равен Window, а steps (по сути это свойство объект) равно объекту Vue, который я создал.

Через "стрелки" тоже посмотрел, результат тот же.

Где в моих знаниях пробел?

Answer 1

Где в моих знаниях пробел?

Потеря контекста вызова.

let data = {
  steps: [{
    item: "1"
  }],
  prevStep: function() {
    console.log(this, steps)
  }
}
const steps = new Vue({
    el: '#app',
    data: data
})

Где в моих знаниях пробел?

Определяйте методы в объекте methods.

// Отключим ненужные для примера 
// сообщения в консоли. 
Vue.config.productionTip = false 
Vue.config.devtools = false 
 
const steps = new Vue({ 
  el: '#app', 
  data: { 
    steps: [{ 
      item: "1" 
    }] 
  }, 
  methods: { 
    prevStep: function(event) { 
      console.log(this.steps) 
    } 
  } 
}) 
 
steps.prevStep()

<div id="app"> 
  <button class="prev-btn" @click="prevStep">Назад</button> 
</div> 
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>