如何将 Vue JS 'this.somestate' 作为文字'this.somestate' 传递

Question

假设在一个 Vue JS 应用程序中，我有一些状态

data () {
    optionA: {
        xaxis: { categories: ['DD'] }
    }
}

还有一个像这样使用状态作为参数的方法：

modifyOption (optionName, xAxisCategory, dataLabelsEnabled) {
  optionName = {
    ...optionName,
    ...{
      xAxis: { categories: xAxisCategory },
      dataLabels: { enabled: dataLabelsEnabled }
    }
  }
}

注意optionName 参数，它应该是一个状态名称，例如当该方法被调用时

this.mofifyOption(this.optionA, 'DD MMM', true)

我希望它运行为

modifyOption (this.optionA, 'DD MMM', true) {
  this.optionA = {
    ...this.optionA,
    ...{
      xAxis: { categories: 'DD MMM' },
      dataLabels: { enabled: true }
    }
  }
}

我不希望 this.optionA 的值，只是文字 this.optionA。有没有办法做到这一点？

Answer 1

不，没有。最好和最简单的解决方案是返回新对象：

modifiedOption(option, xAxisCategory, dataLabelsEnabled) {
  return {
    ...option,
    xAxis: { categories: xAxisCategory },
    dataLabels: { enabled: dataLabelsEnabled },
  };
}

被称为this.optionA = this.modifiedOption(this.optionA, 'DD MMM', true);

另一种方法是将属性名称（字符串）作为参数传递并使用括号语法访问属性：

modifyOption(name, xAxisCategory, dataLabelsEnabled) {
  this[name] = {
    ...this[name],
    xAxis: { categories: xAxisCategory },
    dataLabels: { enabled: dataLabelsEnabled },
  };
}

被称为this.modifiedOption('optionA', 'DD MMM', true);。