<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/koderdojo/pen/MozqVL?limit=all&page=80&q=contact+" />
<link rel='stylesheet prefetch' href='//fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'><link rel='stylesheet prefetch' href='//unpkg.com/vuetify/dist/vuetify.min.css'>
<style class="cp-pen-styles"></style></head><body>
<script type="text/x-template" id="contacts">
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-toolbar class="blue" dark>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Contacts</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
<v-btn icon>
<v-icon>view_module</v-icon>
</v-btn>
</v-toolbar>
<v-list two-line>
<v-list-tile avatar v-for="contact in contacts" v-bind:key="contact.id">
<v-list-tile-avatar>
<v-icon class="blue white--text">face</v-icon>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>
{{ contact.name }}
</v-list-tile-title>
<v-list-tile-sub-title>{{ contact.phone }}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn :to="'/contacts/' + contact.id" icon ripple>
<v-icon class="grey--text text--lighten-1">info</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-card>
</v-flex>
</v-layout>
</script>
<script type="text/x-template" id="contact">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-card-media src="//s3-us-west-2.amazonaws.com/s.cdpn.io/1032908/desert.jpg" height="200px">
</v-card-media>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">{{ contact.name }}</h3>
<p class="text-lg-center">{{ contact.phone }}</p>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat class="orange--text" to="/">Back</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</script>
<v-app id="app" standalone>
<main>
<v-container fluid>
<router-view></router-view>
</v-container>
</main>
</v-app>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//unpkg.com/vue'></script><script src='//unpkg.com/vuetify/dist/vuetify.min.js'></script><script src='//unpkg.com/vuex'></script><script src='//unpkg.com/vue-router'></script>
<script >const store = new Vuex.Store({
state: {
contacts: [
{id: 1, name: 'John Doe', phone: '111-222-3333'},
{id: 2, name: 'Jane Doe', phone: '111-222-4444'},
{id: 3, name: 'Timmy Doe', phone: '111-222-5555'},
]
}
})
const Contacts = {
data() {
return {
headers: [
{ text: 'Name', value: 'name', align: 'left' },
{ text: 'Phone', value: 'phone', align: 'left' }
],
}
},
computed: {
contacts() {
return this.$store.state.contacts
}
},
template: '#contacts'
}
const Contact = {
computed: {
contact() {
const id = parseInt(this.$route.params.id);
return this.$store.state.contacts.filter(function(c) {
return c.id === id;
})[0];
}
},
template: '#contact'
}
const routes = [
{ path:'/', component: Contacts},
{ path:'/contacts/:id', component: Contact}
]
const router = new VueRouter({
routes
});
new Vue({
store,
router
}).$mount('#app');
//# sourceURL=pen.js
</script>
</body></html>
