JSFiddle - React, Tailwind, and code Playground

by holoverse

HTML

<div id="app">
  <div  class="jokes" v-for="joke in jokes" >
  <strong>{{joke.body}}</strong>
  <small>{{joke.upvotes}}</small>
  <p class="small" :class="{ blue : joke.selected, grey: !joke.selected }">EERER</p>
  <button v-on:click="upvote(joke)">UpVote</button>
  
  <div>
</div>

CSS

.blue {
  background:blue;
}
.grey {
  background:grey;
}
.small {
  font-size:10px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    jokes:[{body:"test",selected:false, upvotes:3, upvoted:false},{body:"test2",selected:false, upvotes:0, upvoted:false}]
  },
  methods: {
    upvote: function(joke) {
       joke.upvotes++;
       if(!joke.selected){
       		joke.selected=true;
       }
   }
  }
});