Building the Real Application Chapter 5<v-btn color="primary" v-on:click="reply">Reply</v-btn>
</v-flex>
</v-layout>
</template>
<script type="text/javascript">
export default {
data () {
return {
message: 'Hello there, how are you?',
}
},
methods: {
reply () {
this.message = "I'm doing great. Thank You!"
}
}
}
</script>This will behave the same way as what we did with v-text.
Handling forms with Vue.js
Now that we have a basic idea of how Vue.js works, let's roll ahead with our first form,
where we will be adding the details of movies and displaying those movies in the home
page so that users can view them.
Creating a movies listing page
First of all, let's start with creating static movie cards for our home page and we will make
this data dynamic in the next step. In Home.vue, replace the content inside template with
the following code:
<template>
<v-layout row wrap>
<v-flex xs4>
<v-card>
<v-card-title primary-title>
<div>
<div class="headline">Batman vs Superman</div>
<span class="grey--text">2016 ‧ Science fiction film/Action
fiction ‧ 3h 3m</span>
</div>