Question

我需要在vuejs2

中发生事件时重置变量

这里我的代码有2个函数：“add”和“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;
        }
    }
});

我想重置“groupc”变量但不“挑战”变量。

有些想法？

Answer 1

在JavaScript中，数组不是按值分配的，而是通过引用分配的。这个很重要。请看以下示例：

var array_original = ['a', 'b', 'c'];
var array_copy = array_original;

array_copy[0] = 'd';

您正在做的事情似乎假设array_original仍会包含['a', 'b', 'c']，但它实际上会包含['d', 'b', 'c']，就像array_copy一样！

如果要修复代码，则需要显式克隆数组。此外，您需要确保将其设为深层克隆，否则您仍然会遇到内部对象出现问题！

使用jQuery进行深度克隆的示例：

var array_original = ['a', 'b', 'c'];
var array_copy = $.extend(true, [], array_original);

如果您不想使用jQuery，请对深度克隆对象数组进行一些额外的研究。或者，不要在全局范围内定义ggroupc - 而是在本地分配这些值并使用mounted生命周期挂钩！

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}
      ];
    }
  }
});

Answer 2

因为变量是指向内存中某个地方的链接

你必须清除计数器

请参阅更正的小提琴https://jsfiddle.net/simati/h6dt3t6n/

*我也添加了Object.assign()创建新对象，也许你需要它

例如

：

open conosle（ chrome： ctr + shift + i）
点击按钮日志查看结果
点击按钮添加，然后点击按钮日志查看结果
点击按钮重置，然后点击按钮日志查看结果

<强>更新

方法Object.assign()无效，已更改为JSON.parse(JSON.stringify())

方法resetIndex()也重新设计为在原始计数器上重置

vuejs2：事件发生时重置变量

2 个答案: