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

因为你在Javascript中这样做：

 var images = this.person.images;

图片的价值现在是＆＃34; this.person.images＆＃34;的参考。

解决这个问题的一个想法是遍历＆＃34;图像＆＃34;数组并将其添加到＆＃34; att＆＃34;像这样的数组：

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

Answer 2

更简单的解决方案是

ngOnInit() {
    
    this.route.paramMap
    .switchMap((params: ParamMap) =>
      this.service.getRadioData(params.get('slug'))
    )
    .subscribe(
      (data)  => {
        this.radio$ = data;
        console.log("this.radio$ IS: ", this.radio$)
        // this.radio$ - is a readable Object
      }
    );   
  }

避免循环。

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

2 个答案: