Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

Here, we have also added an area where a user can click on to Rate this Movie. Let's move
ahead to add the functionality to rate the movie. For this, we will be using a package

called vue-star-rating, which makes it easy to add the rating component. You can find

this example on this link as well

at https://jsfiddle.net/anteriovieira/8nawdjs7/.

Let's first add the package:

$ npm install vue-star-rating --save

In Movie.vue, replace the content with the following:

<template>

<v-layout row wrap>

<v-flex xs4>

<v-card>

<v-card-title primary-title>

<div>

<div class="headline">{{ movie.name }}</div>

<span class="grey--text">{{ movie.release_year }} ‧ {{

movie.genre }}</span>

</div>

</v-card-title>

<h6 class="card-title" v-if="current_user">Rate this movie</h6>

<v-card-text>

{{ movie.description }}

</v-card-text>

</v-card>

</v-flex>

</v-layout>

</template>

<script>

import axios from 'axios';

import Vue from 'vue';

import StarRating from 'vue-star-rating';

const wrapper = document.createElement('div');

// shared state

const state = {

note: 0,

};

// crate component to content

const RatingComponent = Vue.extend({

data() {

return { rating: 0 };

},

watch: {