Mathew Sanders mathewsanders

## ContestList.vue
<!-- template code -->
<template>
  <div>
    <ul>
      <!-- loop over parties -->
      <li class="party" v-for="party in APIresponse.parties">
      <h3>{{ party.name }} Party</h3>
      <ol>

        <!-- loop over contests for a party -->

## StyleGuideView.vue
<section>
  <div class="details">
    <h1>Cafe Card</h1>
    <p>The cafe card shows information about a specific cafe including a description, hours, and the cafe's location.</p>
    <!--
      v-model directive connects our 'cafe' object to the contents of the text area with what is called
      a two-way binding, meaning that changes made in the textarea update the 'cafe' object, and that changes
      to the 'cafe' object also update the contents of the textarea.
    -->
    <textarea v-model="cafe | json"></textarea>

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="default.css">
  </head>
  <body id="app">

    <!-- router-view is a component that gets's swapped out for the component that matches the current route in main.js -->
    <router-view></router-view>

## main.js
// import Vue framework
import Vue from 'vue'
import Resource from 'vue-resource'
import Router from 'vue-router'

// tell vue to use the packages loaded from vue-resource, and vue-router
Vue.use(Resource)
Vue.use(Router)

// turn on dubugging messages

## package.json

"dependencies": {
  "vue": "^1.0.0",
  "vue-resource": "^0.7.0"
},

## main.js
// import Vue framework
import Vue from 'vue'
import Resource from 'vue-resource'

// tell vue to use the package loaded from vue-resource
Vue.use(Resource)

// turn on dubugging messages
Vue.config.debug = true

## 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() {

## 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>

## CafeGridView.vue
<!-- snip -->

<cafe-card
    v-for="cafe in cafes | orderBy 'name'"
    :cafe="cafe">
<cafe-card>

<!-- snip -->

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Coffee Finder ☕️ New York</title>
    <link rel="stylesheet" href="default.css">
  </head>
  <body>

    <cafe-grid></cafe-grid>
	<!-- template code -->
	<template>
	<div>
	<ul>
	<!-- loop over parties -->
	<li class="party" v-for="party in APIresponse.parties">
	<h3>{{ party.name }} Party</h3>
	<ol>

	<!-- loop over contests for a party -->
	<section>
	<div class="details">
	<h1>Cafe Card</h1>
	<p>The cafe card shows information about a specific cafe including a description, hours, and the cafe's location.</p>
	<!--
	v-model directive connects our 'cafe' object to the contents of the text area with what is called
	a two-way binding, meaning that changes made in the textarea update the 'cafe' object, and that changes
	to the 'cafe' object also update the contents of the textarea.
	-->
	<textarea v-model="cafe \| json"></textarea>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="default.css">
	</head>
	<body id="app">

	<!-- router-view is a component that gets's swapped out for the component that matches the current route in main.js -->
	<router-view></router-view>
	// import Vue framework
	import Vue from 'vue'
	import Resource from 'vue-resource'
	import Router from 'vue-router'

	// tell vue to use the packages loaded from vue-resource, and vue-router
	Vue.use(Resource)
	Vue.use(Router)

	// turn on dubugging messages
	<!-- 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() {
	<!-- 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>
	<!-- snip -->

	<cafe-card
	v-for="cafe in cafes \| orderBy 'name'"
	:cafe="cafe">
	<cafe-card>

	<!-- snip -->