javascript - 如何使用此和(多个)动态括号表示法更改 vue 数据变量

Question

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

1. 我从包含数据变量“reportText.Scope_1_T_1”的 p 元素开始，该变量包含字符串:“要更改的文本”；
2. 创建此组件时，将调用created()，并触发对createObject 方法的调用。 createObject 方法需要多个参数，但唯一相关的参数是第二个参数，其中包括我要更改的数据变量的位置(在本例中为:“reportText.Scope_1_T_1”)；
3. createObject 方法根据点分割此参数/位置并返回一个数组。因此字符串“reportText.Scope_1_T_1”返回数组[“reportText”，“Scope_1_T_1”]；
4. 接下来，该数组将被循环并与上下文 (=this) 组合。第一个循环返回 context = this["reportText"]，第二个循环返回 context = this["reportText"]["Scope_1_T_1"]。
5. 此后，我将一个新字符串分配给上下文(context =reply.fields)

我的预期是此代码会导致数据变量 this.reportText.Scope_1_T_1 发生更改，但不幸的是该变量没有发生任何变化。

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

• this.reportText.Scope_1_T_1 = "新字符串";或
• this["reportText"]["Scope_1_T_1"] = "新字符串";

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

这是我的相关代码(如果您需要更多，请告诉我):

<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>

如果有人能帮助我弄清楚使用动态创建的上下文和静态上下文之间的区别(如下所示:this["reportText"]["Scope_1_T_1"])，我将不胜感激。我认为这是解决这个问题的关键。

我的代码基于这个 stackoverflow 问题: Javascript Square Bracket Notation Multiple Dynamic Properties

Answer 1

这只是最后一步，行不通。最后为 context 分配新值只会更新该局部变量，而不是对象的属性。

相反，您需要做的是获取对相关对象的引用，然后更新属性。要抓取对象，您需要从 location 路径中删除最后一部分。最后一部分是需要更新的属性名称:

let context = this;
const path = location.split('.');
const property = path.pop()

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

context[property] = reply.fields;

用于属性访问的语法隐藏了路径各部分解释方式的一些不对称性。

考虑这个例子:

const a = b.c.d.e

发生的事情是:

1. 以b开头。
2. 获取属性c中的值。
3. 获取属性 d 中的值。
4. 获取属性e中的值。
5. 将该值分配给a。

一切都很好且对称，c、d 和 e 似乎都以相同的方式工作。

现在考虑翻转该示例:

b.c.d.e = a

这是非常不同的。

1. 以b开头。
2. 获取属性c中的值。
3. 获取属性 d 中的值。
4. 将 a 分配给属性 e。

在这种情况下，c 和 d 属性仍然只是读取操作，但 e 的处理方式完全不同。最后一部分是写操作。

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

无论您使用 . 还是 [] 表示法对此行为都没有影响，但要动态访问属性，您必须使用 [] .