Skip to content

Instantly share code, notes, and snippets.

@rlam3 rlam3/news.vue
Last active May 16, 2018

Embed
What would you like to do?
<template>
<q-page padding>
<!-- content -->
<q-card inline @click.native="handler1">
<q-card-media>
<img src="~assets/quasar-logo-full.svg">
</q-card-media>
<q-card-title>
Cafe Basilico
<div slot="right" class="row items-center">
<q-icon name="place" /> 250 ft
</div>
</q-card-title>
</q-card>
<q-card inline :to="{ name: 'newsDetail' }">
<q-card-media>
<img src="~assets/quasar-logo-full.svg">
</q-card-media>
<q-card-title>
Cafe Basilico
<div slot="right" class="row items-center">
<q-icon name="place" /> 250 ft
</div>
</q-card-title>
</q-card>
</q-page>
</template>
<script>
// console.log( "Stack" + window.history.length)
export default {
name: 'NewsIndex',
methods: {
handler1: function (data) {
console.log('hello')
this.$router.push('/news/detail')
// $router.push('/index')
}
}
}
</script>
<style>
</style>
<template>
<q-page padding>
<!-- content -->
<q-layout-header>
<q-toolbar
color="primary"
:glossy="$q.theme === 'mat'"
:inverted="$q.theme === 'ios'"
shrink
>
<q-btn
v-go-back=" '/news/' "
color="primary"
icon="fa fa-chevron-left"
round
flat
/>
<q-toolbar-title>
News Detail
</q-toolbar-title>
<q-btn flat round dense icon="" />
</q-toolbar>
</q-layout-header>
<q-card padding inline class="q-ma-sm">
<q-card-media>
<q-parallax src="statics/parallax1.jpg" :height="150">
<div slot="loading">Loading...</div>
</q-parallax>
</q-card-media>
<q-card-title>
Parallax
<span slot="subtitle">Subtitle</span>
</q-card-title>
<q-card-separator />
<q-card-actions>
<q-btn flat>Action 1</q-btn>
<q-btn flat>Action 2</q-btn>
</q-card-actions>
</q-card>
</q-page>
</template>
<script>
export default {
name: 'NewsDetailVue',
pageTitle: 'Detail Page!!!'
}
</script>
<style>
</style><template>
<q-page padding>
<!-- content -->
<q-layout-header>
<q-toolbar
color="primary"
:glossy="$q.theme === 'mat'"
:inverted="$q.theme === 'ios'"
shrink
>
<q-btn
v-go-back=" '/news/' "
color="primary"
icon="fa fa-chevron-left"
round
flat
/>
<q-toolbar-title>
News Detail
</q-toolbar-title>
<q-btn flat round dense icon="" />
</q-toolbar>
</q-layout-header>
<q-card padding inline class="q-ma-sm">
<q-card-media>
<q-parallax src="statics/parallax1.jpg" :height="150">
<div slot="loading">Loading...</div>
</q-parallax>
</q-card-media>
<q-card-title>
Parallax
<span slot="subtitle">Subtitle</span>
</q-card-title>
<q-card-separator />
<q-card-actions>
<q-btn flat>Action 1</q-btn>
<q-btn flat>Action 2</q-btn>
</q-card-actions>
</q-card>
</q-page>
</template>
<script>
export default {
name: 'NewsDetailVue',
pageTitle: 'Detail Page!!!'
}
</script>
<style>
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.