Javascript 如何使用此和（多个）动态括号符号更改vue数据变量

我正在努力实现以下目标：

我从一个p元素开始，该元素包含数据变量“reportText.Scope_1_T_1”，该变量包含字符串：“Text to change”

创建此组件时，将调用created（），并触发对方法createObject的调用。方法createObject需要多个参数，但唯一相关的参数是第二个参数，其中包括我要更改的数据变量的位置（在本例中为：“reportText.Scope_1_T_1”）

createObject方法基于点拆分此参数/位置，并返回一个数组。因此字符串“reportText.Scope_1_T_1”返回数组[“reportText”，“Scope_1_T_1”]

之后，该数组循环并与上下文（=this）组合。第一个循环的结果是context=this[“reportText”]，第二个循环的结果是context=this[“reportText”][“Scope\u 1\u T\u 1”]

在此之后，我将一个新字符串分配给上下文（context=reply.fields）

我的期望是，这段代码会导致数据变量this.reportText.Scope_1_T_1发生变化，但不幸的是，这个变量没有发生任何变化

我尝试过使用点符号和括号符号，但没有任何效果。例如，如果我尝试将createObject方法中的代码更改为：

• this.reportText.Scope_1_T_1=“新字符串”；或
• 此[“reportText”][“Scope_1_T_1”]=“新字符串”

它突然起作用了吗？我不明白为什么。我甚至试着看我是否以某种方式复制了“this”，这样它就不会引用同一个对象，但就我所见，它不会复制。这似乎确实是一个参考问题，因为当我使用动态括号时，它不知何故指向了一个不同的位置

这是我的相关代码（如果您需要更多，请告诉我）：

{{reportText.Scope_1_T_1}}

导出默认值{
数据：函数（）{
返回{
报告文本：{
范围_1_T_1:“要更改的文本”
}
}
},
创建（）{
这是.store.getters.getAppPromise.then（应用=>{
this.createObject（app，'reportText.Scope_1_T_1'，'String'，'=irrelatexpression'）；
})
},
方法：{
createObject（应用程序、位置、类型、表达式）{
如果（类型=='String'）{
app.creategenericjbect(
{
字段：{
qString表达式：表达式
}
},
答复=>{
让上下文=这个；
位置=位置.拆分（'.'）；
location.forEach（项目=>{
上下文=上下文[项目]；
});
上下文=reply.fields；
}
)
}
}
}
}

如果有人能帮我找出使用动态创建的上下文和静态上下文（如：this[“reportText”][“Scope_1_T_1”]）之间的区别，我将不胜感激。我认为这是解决这个问题的关键

我的代码基于以下问题：

---

这只是最后一步行不通。在末尾为

context

赋值只会更新该局部变量，而不是对象的属性

相反，您需要做的是获取对相关对象的引用，然后更新属性。要抓取对象，需要从

位置

路径中删除最后一个部分。最后一部分是需要更新的属性名称：

let context=this；
const path=location.split（'.'）；
const property=path.pop（）
path.forEach（项=>{
上下文=上下文[项目]；
});
上下文[属性]=reply.fields；

用于属性访问的语法隐藏了如何解释路径部分的一些不对称性

考虑这个例子：

常数a=b.c.d.e

发生的情况是：

从

b

开始

获取属性

c

中的值

获取属性

d

中的值

获取属性

e

中的值

将该值指定给

a

所有漂亮且对称的，

c

、

d

和

e

似乎都是以同样的方式工作的

现在考虑翻转这个例子：

b.c.d.e=a

这是非常不同的

从

b

开始

获取属性

c

中的值

获取属性

d

中的值

将

a

分配给属性

e

在这种情况下，

c

和

d

属性仍然只是读取操作，但是

e

的处理方式完全不同。最后一部分是写操作

这里需要注意的关键是，当您想要设置值时，像这样的“路径”的最后一部分是特殊的。通常情况下，这隐藏在语法后面，但是当您想要像在示例中那样分解它时，您需要意识到实际发生了什么

无论您是使用

还是

[]

符号，都不会对这种行为产生影响，不过要动态访问属性，您必须使用

[]

谢谢您的回答（以及额外的编辑）。你知道这种行为叫什么吗？因为我想了解更多，但我不知道该搜索什么。例如，“引用对象JavaScript”并没有真正的帮助，因为它太宽泛了。

<template>
  <p>{{ reportText.Scope_1_T_1 }}</p>
</template>

<script>
export default {
  data: function() {
    return {
      reportText: {
        Scope_1_T_1: 'Text to change'
      }
    }
  },
  created() {
    this.$store.getters.getAppPromise.then(app => {
      this.createObject(app, 'reportText.Scope_1_T_1', 'String', '=irrelevantExpression');
    })
  },
  methods: {
    createObject(app, location, type, expression) {
      if (type === 'String') {
        app.createGenericOjbect(
          {
            fields: {
              qStringExpression: expression
            }
          },
          reply => {
            let context = this;
            location = location.split('.');

            location.forEach(item => {
              context = context[item];
            });

            context = reply.fields;
          }
        )
      }
    }
  }
}
</script>