Design in the browser, activity 10: update CafeGridView.vue logic code

CafeGridView.vue

<!-- logic code -->
<script>

// you'll need to update your ID based on the book you create on Fieldbook
var bookId = '56c3c166589a1f0300c53acd'
var baseUrl = 'https://api.fieldbook.com/v1/' + bookId

export default {
  // make 'cafes' and 'cafeSortOrder' avalaible as data avalaible for this component to use
  data: function() {
    return {
      cafes: [],
      cafeSortOrder: 'distanceMeters'
    }
  },
  
  // add a method that changes 'cafeSortOrder' to whatever value is passed in
  methods: {
    setSortOrder: function (sortOrder) {
      this.cafeSortOrder = sortOrder
    }
  },
  
  // this defines a method that is called when this component is ready to display
  ready: function () {
    var listCafesUrl = baseUrl + '/cafes'
    // request content from a URL, and then when we have the response update our 'cafes' property
    this.$http.get(listCafesUrl).then(function (response) {
        this.cafes = response.data
    }, function (response) {
        // error callback
    })
  }
}
</script>