VueJS2 - 计算属性/方法是设置Vue.data？

Question

I've been building a form with Vue, where I copy all the data I need to submit over to a separate params object, process it, and then submit that object through AJAX. Everything working fine with that, except for an annoying array which seems to directly set my Vue.data object.

Here's my code:

getParams: function () {
  return {
    organism:           this.organism,
    species_id:         this.speciesID,
    bioinformatics:     this.bioinformatics,
    // ... more params
  }
}

sanitizeParams: function() {
  var params = this.getParams();

  // other validations here (that work fine)     

  if(this.isOther(this.bioinformatics)) {

    console.log(this.bioinformatics) // ['other']
    console.log(params.bioinformatics) // ['other']

    var idx = params.bioinformatics.indexOf('other');
    params.bioinformatics.splice(idx,1);

    console.log(this.bioinformatics) // [] <-- Why does this change?!
    console.log(params.bioinformatics) // []        

    params.bioinformatics.push(this.bioinformaticsOther);
  }
  return params;
},

saveForm: function () {
  var params = this.sanitizeParams();
  if(this.formValidation) {
    // send ajax with correct params
  }
},

Bioinformatics is a checkbox selection which includes "Other" in its options -- which, in turn, opens an input box where the user can insert his own text. What I'm trying to accomplish is to remove 'other' from the params.data.bioinformatics array and add Vue.data.bioinformaticsOther to it.

What's happening is that my Vue.data.bioinformatics gets changed as well! As soon as params.bioinformatics.splice runs, both arrays change, instead of just my local params object (as I expected it to happen). This in turns causes my UI to stop working correctly since the option value stored by Vue in data is no longer 'other'. I started having these functions as computed properties but I changed them to methods to see if would solve the problems, but the same thing happens (hence the title).

I'm still very new to Vue and JS in general so I'm sorry if it's really something obvious but I've been really dumbfounded for a while (especially since my other non-array options using the same method work just fine).

I'm sorry if this description is confusing, I'll add more data if needed.

EDIT: Added some console.log's to the code so it's easier to understand the problem. Also solved wrong variable name in the description.

Answer 1

I expect your problem here is with getParams . As written, getParams will return an object where the bioinformatics is passed by reference. In other words, params.bioinformatics and data.bioinformatics are pointers to the same array. So, when you modify params.bioinformatics , you see the behavior you are logging. Instead, you might get your bioinformatics property as a copy rather than a reference.

getParams: function () {
  return {
    organism:           this.organism,
    species_id:         this.speciesID,
    bioinformatics:     this.bioinformatics.slice(),
    // ... more params
  }
}