shop-system
/
communication1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<!--
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 -->
 	<style type="text/css">

	.disabled {
	  color: orange;
	}

 	</style>
</head>
<body>

	<div id="app">
	    <div class="container-fluid">
	        <ul class="list-group">
				<post v-for="item in posts" :posti="item"></post>
	        </ul>
	    </div>
	</div>


	<template id="post-template">
	  <li class="list-group-item">
	    <i class="glyphicon glyphicon-chevron-up" v-on:click="upvote" :class="{disabled: upvoted}"></i>
	    <span class="label label-primary">{{ votes }}</span>
	    <i class="glyphicon glyphicon-chevron-down" v-on:click="downvote" :class="{disabled: downvoted}"></i>
	    <a>{{ posti.title }}</a>
	  </li>
	</template>

	<script type="text/javascript">

		Vue.component('post', {
		  template: "#post-template",
		  props: ['posti'],
		  data: function () {
		    return {
		      upvoted: false,
		      downvoted: false
		    };
		  },
          methods:{
        	upvote:function(){
        		this.upvoted = !this.upvoted;
        		this.downvoted = false;
        	},
        	downvote:function(){
        		this.downvoted = !this.downvoted;
        		this.upvoted = false;
        	}
          },
          computed:{
          	votes:function(){

          		if(this.upvoted){

          			return this.posti.votes + 1;
          		}
          		else if(this.downvoted){
          			return this.posti.votes - 1;
          		}
          		else{
          			return this.posti.votes;
          		}
          	}
          }
		});

		var vm = new Vue({
            el: '#app',
            data:{
            	posts: [{
	                title: "A post for our reddit demo starting at 15 votes",
	                votes: 15
	            },
	            {
	                title: "Try out the upvoting, it works, I promise",
	                votes: 53
	            },
	            {
	                title: "coligo is the bomb!",
	                votes: 10
	            }]
            }
        });

	</script>
</body>
</html>