Это магия callback-ов?

Question

Работаю с 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, который я создал.

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

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

Повесил обработчик события через vuejs @click — T Cloud, Jun 07 '19 at 02:09
Может, покажете больше кода - если он, конечно, не секретный? — , Jun 07 '19 at 02:26
Если вы хотите обратиться к свойству объекта - надо писать object.property, а steps - это вы обращаетесь к переменной. В данном случае это созданный объект, т.к. const steps = new Vue({. Ну а this это this https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/this — Skywave, Jun 07 '19 at 04:46

score 0 · Accepted Answer · answered Jun 07 '19 at 04:49

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

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

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>

Это магия callback-ов?

1 Answers1