重学Vue之 死磕原理

学习一个技术,最好的入手是从一个问题开始,
问:为什么这个Vue代码在created()或mounted()执行完查询后,此时的transactionList还是undefined呢?

<template>

  {{transactionList}}
  <div v-for="(v,k,i) in transactionList">
    {{v}}-{{k}}-{{i}}
  </div>

</template>

<script>
import axios from 'axios'

export default {
  name: "TransactionList",
  data() {
    return {
      transactionList: []
    }
  },
  methods: {
    requestTransaction() {
       axios.get('https://api.spacexdata.com/v4/capsules')
           .then(function (res) {
             console.log('res ', res)
             console.log('transactionList ', this.transactionList)
             console.log('res.data ',res.data)
             this.transactionList = res.data
           }).catch(function (err) {
             console.log('err ', err)
           }).finally(function () {
             console.log('finally')
           })
     }
  },
  mounted() {
    this.requestTransaction()
  }
  // ,
  // created (){
  //   this.requestTransaction()
  // }


}
</script>

<style scoped>

</style>