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

Question

我有一个奇怪的 js/vuejs 问题，当一个变量在函数内更新时（从 data(){} 获取数据），它会上升数据也更新它。

这是一个代码示例。它检查用户是否没有头像，它将图像名称通过 axios 发送到 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”的参考。

解决这个问题的一个想法是循环遍历“Images”数组的每一项并将其添加到“att”数组中，如下所示：

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替换为：

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