首页 > 解决方案 > 如何访问存储在此 Javascript 数组 (vue.js) 中的变量?

问题描述

我正在使用 Javascript Vue.js 框架做一个小练习。我剪切了以下代码以显示我的问题。我在数据部分有两个没有值的变量。我尝试在一个方法中编辑这两个变量。

我将两个数值存储在一个名为“counter”的数组中。

我之前将数据部分中的两个变量(a 和 b)存储在一个名为“values”(带有“this”)的数组中。

然后我使用两个 for 循环来编辑它们。但是当它们存储在数组“值”中时,我无法访问变量 a 和 b。我认为我的问题是数组“值”。如果我更改“this.a”中最后一个 for 循环中的值 [i],它会起作用。但如果我想访问存储在数组中的变量,则不是。

我认为这是一个 JavaScript 问题,但我不知道如何解决它。我已经在堆栈溢出中查找了一些类似的问题,但我无法将解决方案转移到我的案例中。

// Vue.js Model-Part

data: {
   a = '';
   b = '';
}

//A snippet out of the method-part
var one = 13;
var two = 14;

counter = [one, two];
values = [this.a, this.b];

for(var i = 0; i < counter.length-1; i ++){
    for(var position = 0; position < counter[i]; position ++){
        values[i] += "*";
};

标签: javascriptarraysvue.jsmodel

解决方案


因为aandb是字符串,它们的值复制到values数组中。这样做

for(var position = 0; position < counter[i]; position ++){
        values[i] += "*";

只是在values数组中更改它们的值的副本。因此,您应该直接修改this.athis.b,或者您可以将这些变量捕获到一个函数中,该函数本身直接更改它们的值。

var functionToChangeAandB = (val1, val2) => {
  this.a = val1
  this.b = val2
}

functionToChangeAandB('one', 'two')

推荐阅读