JSFiddle - React, Tailwind, and code Playground

by simati

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  {{groupc}}
  <br />
  <button @click="add">Add</button>
  <button @click="reset">reset</button>
  <button @click="log">log</button>
</div>

JavaScript

var ggroupc = [
						{id:1, country:"Francia", pj:0, pg:0, pe:0, pp:0, gf:0, gc:0, dg:0, pt:0},
						{id:2, country:"Australia", pj:0, pg:0, pe:0, pp:0, gf:0, gc:0, dg:0, pt:0},
						{id:3, country:"Peru", pj:0, pg:0, pe:0, pp:0, gf:0, gc:0, dg:0, pt:0},
						{id:4, country:"Dinamarca", pj:0, pg:0, pe:0, pp:0, gf:0, gc:0, dg:0, pt:0}
					];

var app = new Vue({
			el: '#app',
			data: {
				challenges: [[1,2],[3,4],[1,3],[2,4],[1,4],[2,3]],
				groupc: JSON.parse(JSON.stringify(ggroupc))
			},
			methods: {
      	add : function() {
        	this.groupc[0].pj++
          this.groupc[1].pg++
        },
      	reset : function() {
          this.resetIndex()
        },
        resetIndex() {
          this.groupc[0].pj = ggroupc[0].pj
          this.groupc[1].pg = ggroupc[1].pg
        },
        log() {
          console.log('ggroupc = ', ggroupc, 'groupc = ', this.groupc)
        }
      },
});