如何通过Vue JS'this.somestate'作为文字'this.somestate'

问题描述

假设在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,true) {
  this.optionA = {
    ...this.optionA,...{
      xAxis: { categories: 'DD MMM' },dataLabels: { enabled: true }
    }
  }
}

我不期望this.optionA的值，而只是文字this.optionA的值。有办法吗？

解决方法

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

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

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

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

modifyOption(name,dataLabelsEnabled) {
  this[name] = {
    ...this[name],};
}

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