vuejs2 : reset variable when a event happened - variables

Question

I need reset a variable when a event happened in vuejs2
Here I have my code with 2 functions: "add" and "reset":
https://jsfiddle.net/uo19p71m/
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: ggroupc
},
methods: {
add: function () {
this.groupc[0].pj++;
this.groupc[1].pg++;
this.challenges[0][0]++;
},
reset: function () {
this.groupc = ggroupc;
}
}
});
I want to reset the "groupc" variable but doesn't "challenges" variable.
Some idea?

Answer 1

because the variable is a link to a place in memory
you must clear the counters
see corrected fiddle https://jsfiddle.net/simati/h6dt3t6n/
*also I added create new object with Object.assign() maybe you need it
in example:
open conosle (chrome: ctr + shift + i)
click button log see result
click button add and next click button log see result
click button reset and next click button log see result
UPDATE:
method Object.assign() not working, has been changed to JSON.parse(JSON.stringify())
also method resetIndex() redesigned to reset on original counters

Answer 2

Arrays are not assigned by value in JavaScript, but by reference. This is important. Take the following example:
var array_original = ['a', 'b', 'c'];
var array_copy = array_original;
array_copy[0] = 'd';
What you're doing seems to assume that array_original will still contain ['a', 'b', 'c'], but it will actually contain ['d', 'b', 'c'] just like array_copy does!
If you want to fix your code, you're going to need to explicitly clone the array. Additionally, you'll need to be sure to make it a deep clone or you'll still have problems with the objects inside for the same reason!
Example of a deep clone using jQuery:
var array_original = ['a', 'b', 'c'];
var array_copy = $.extend(true, [], array_original);
If you don't want to use jQuery, do some additional research into deep cloning of arrays of objects. Alternatively, don't define your ggroupc globally--instead, assign these values locally and use the mounted lifecycle hook!
var app = new Vue({
el: '#app',
data: {
challenges: [[1,2],[3,4],[1,3],[2,4],[1,4],[2,3]],
groupc : ggroupc
},
mounted: function() {
this.reset();
},
methods: {
add : function() {
this.groupc[0].pj++;
this.groupc[1].pg++;
this.challenges[0][0]++;
},
reset : function() {
this.groupc = [
{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}
];
}
}
});