如何从更新数据变量停止vuejs方法变量

Question

我有一个奇怪的js/vuejs问题，当一个变量在函数内部更新（从data（）{}）中获取数据时，数据也会随之更新。

这是一个代码示例。它检查如果用户没有轮廓的图像，它会通过爱可信的形象名称发送到一个API，如果用户已经映像，它可以将当前图像添加到列表，并将其发送到API：

addImage (file) { 
    var URL = 'http://foo.com/api'; 

    var images = this.person.images; 

    let att = [] 
    if(images.length) { 
     att = images 
     att.push(file.name) 
    }else{ 
     att.push(file.name) 
    } 

    axios.post(URL, { 
     attachements: att 
    }).then(

     // update dom 

    ).catch(err => {}) 
}, 

这里的问题是this.person.images得到更新，即使我只是想用它来获取当前的图像列表。

如果在执行att.push(file.name)时检查if/else块，this.person.images;也会更新。我仅使用att来存储当前的图像列表并将其发送给api。

无论如何只能使用this.person.image来获取信息？

我可以使用const att = this.person.image，但之后我无法更新att。

Answer 1

更简单的解决方案将是

var images=JSON.parse(JSON.stringify(this.person.images)) 

避免发生循环。

Answer 2

因为在Javascript中当你这样做：

var images = this.person.images; 

图像的值现在是 “this.person.images” 的参考。解决这一问题

一种想法是循环通过“影像”阵列的每个项，并将其添加到“ATT”阵列像这样：

for (var i = 0,len = images.length; i < len; i++) { 
      att.push(images[i]); 
     } 

：

addImage (file) { 
    var URL = 'http://foo.com/api'; 

    var images = this.person.images; 

    let att = [] 
    if(images.length) { 

    for (var i = 0,len = images.length; i < len; i++) { 
     att.push(images[i]); 
    } 
     att.push(file.name) 
    }else{ 
     att.push(file.name) 
    } 

    axios.post(URL, { 
     attachements: att 
    }).then(

     // update dom 

    ).catch(err => {}) 
}, 

基本上与替换att = images