Vue stuff.md

Async calls

<template>
<p v-if="isLoading">
  Loading...
  {{ myData.if.you.try.to.access.properties.here.it.will.error }}
</p>
<p v-else>
  {{ myData.you.can.access.properties.now.that.myData.is.loaded }}
</p>
</template>

<script>
export default {
  data: () => ({
    isLoading: false,
    myData: null,
  }),
  async created () {
    try {
      this.isLoading = true
      await this.fetchData()
      // Make sure to handle any errors :)
    } finally {
      this.isLoading = false
    }
  },
  methods: {
    async fetchData () {
      const res = await axios.get('/api/myData')
      this.myData = res.data.myData
    }
  }
}
</script>

Wtf is "this"??

Save yourself hours of pain, and learn how "this" works.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

<script>
export default {
  data: vm => ({
    badData: this.badMethod(), // 'this' = window
    goodData: vm.goodMethod()  // 'vm' = vue component
  }),
  computed: {
    badComputed: () => this.badData, // 'this' = window
    goodComputed: vm => vm.goodData, // 'vm' = vue component
  },
  created () {
    // BAD
    axios.get().then(function (response) {
      // The "function" keyword affects the value of "this".
      console.log(this) // window
      this.myData = response.data
    })
  
    // GOOD
    axios.get().then(response => {
      // An arrow function causes the function to inherit the "this" value from the
      // parent scope, in this case, the scope of the created() function. 
      console.log(this) // vue component
      this.myData = response.data
    })
    
    // GOOD
    const self = this
    axios.get().then(function (response) {
      // Prefer arrow functions, but saving the value of "this" in a higher scope will also work.
      console.log(this) // window
      console.log(self) // vue component
      self.myData = response.data
    })
  
    // Obviously this doesn't just apply to axios callbacks, it applies to any callback.
    // BAD
    setTimeout(function () {
      console.log(this) // window
    }, 0)
    
    // GOOD
    setTimeout(() => {
      console.log(this) // vue component
    }, 0)
  },
  methods: {
    // BAD
    badMethod: () => {
      console.log(this) // window
    },
    // GOOD
    goodMethod () {
      console.log(this) // vue component
    },
    // GOOD
    goodMethod2: function () {
      console.log(this) // vue component
    },
    // DOESN'T MATTER
    doesntMatter: () => {
      // Function doesn't access "this", so an arrow function is fine here.
      return 1 + 1
    }
  }
}
</script>