vuejsメソッド変数がデータ変数を更新するのを止める方法

Question

変数（data（）{}からデータを取得すると変数が更新され、データも更新されるという奇妙なjs/vuejsの問題があります。

ここはコード例です。これは、ユーザーがプロフィール画像がありませんならば、それはユーザが既にイメージを持っている場合、それはリストに現在の画像を追加し、APIに送信します、axios経由で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を更新することはできません。ので、あなたがJavaScriptで

Answer 1

もっと簡単な解決策は、ループ

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

避けるだろう。

Answer 2

：

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を置き換えます