Design in the browser, activity 9: update CafeGridView.vue

CafeGridView.vue

<!-- template code -->
<template>
  <nav>
    <h1>☕️ Coffee Finder <a >New York</a></h1>
    <ul id="sort">
      <li><a href="#" @click="setSortOrder('distanceMeters')">Nearby</a></li>
      <li><a href="#" @click="setSortOrder('name')">Name</a></li>
    </ul>
  </nav>

  <main>
    <cafe-card
      v-for="cafe in cafes | orderBy cafeSortOrder"
      :cafe="cafe">
    </cafe-card>
  </main>
</template>

<!-- logic code -->
<script>
// our data structure that holds information about the cafes we want to display
var cafeData = [
  {
    name: "Cafe Grumpy",
    address: "224 W 20th St, New York, NY 10011",
    hours: "7am — 8pm",
    description: "Hip local coffeehouse chain serving a range of house-roasted brews in a relaxed setting.",
    distanceMeters: 100
  },
  /* remaining cafe data omitted for readability */
]
export default {
  // make 'cafes' and 'cafeSortOrder' avalaible as data avalaible for this component to use
  data: function() {
    return {
      cafes: cafeData,
      cafeSortOrder: 'distanceMeters'
    }
  },
  // add a method that changes 'cafeSortOrder' to whatever value is passed in
  methods: {
    setSortOrder: function (sortOrder) {
      this.cafeSortOrder = sortOrder
    }
  }
}
</script>

<!-- style code -->
<style scoped>
nav {
  margin: 0.5em 1em;
  padding: 1em;
  overflow: auto;
}
/* remaining style declarations ommited for readability */

</style>