如何根据收到的道具在组件中初始化数据并且不失去反应性

Question

我在创建组件之前遇到初始化数据问题。 我的实际问题取决于该问题： 我在我的一个数据属性中失去了反应性，因为我在生命周期挂钩中对其进行了初始化。但是我不知道如何从 data(){} 初始化一个数组，其长度是我从 props 收到的。如果我在生命周期挂钩中实现它，那么我就会失去反应性，正如我之前提到的那样。以下是有关我的组件的更多详细信息：在我的 Vue.js 学习中，我正在尝试实现一个步进器组件。我决定使它更具活力并具有灵活的尺寸。所以在我的步进组件的道具中，我收到了一个具有这种结构的对象：

stepperData: {
        steps: 3,       //maybe later I'll add more options to stepperData, so I decided to implement it as an Object, not Array of content.
        content: [
          {
            header: "Stepper #1",
            text: "Hello World 1!"
          },
          {
            header: "Stepper #2",
            text: "Hello World 2!"
          },
          {
            header: "Stepper #3",
            text: "Hello World 3!"
          }
        ]
      }

在我的步进器组件中，我使用 steps 字段来确定另一个数组的长度，该数组保存有关标记或未标记步骤的数据。这是我用来初始化标记步骤数组的代码：

methods: {
    initializeMarkedSteps() {
      this.markedSteps = [];
      for (var i = 0; i < this.dataStepper.steps; i++) {
        this.markedSteps[i] = false;
      }
    }
}, 
created: function() {
    this.initializeMarkedSteps();
  }

markedSteps 是 data(){} 中的一个空数组因此，在那之后，我得到了一组错误值。在我的模板中，我有一个 v-bind:class

<div class="circle" v-bind:class="{markedCircle: markedSteps[s]}">

多亏了它，所有步骤都没有标记，并且在用户单击 "next" 按钮后它们可以被标记。

<my-btn @click="nextStep">Next</my-btn>

my-btn 是我的简单按钮包装组件。 nextStep() 中的代码：

nextStep() {
  for (let i = 0; i < this.dataStepper.steps; i++) {
    if (this.markedSteps[i] === false) {
      this.markedSteps[i] = true;
      console.log(this.markedSteps);
      return;
    }
  }
}

但是，当我点击按钮时，markedCircle class 并没有像我预期的那样被分配，尽管事实上，markedSteps[i] 的实际值在点击按钮后被更改为 true。我对这些让我一团糟的东西感到非常沮丧。任何帮助将不胜感激。我已经查看了关于这个主题的文档，也阅读了 "Reactivity in Depth" 部分，但我没有看到答案。

Answer 1

存在多个问题

在你的例子中你没有展示你是如何初始化你的 data() 但假设从 initializeMarkedSteps 中的代码 this.markedSteps = []; 我认为你没有 markedSteps 在 data() 中。这是问题 1。Properties in data are only reactive if they existed when the instance was created（将 markedSteps: [] 添加到 data()）
由于 JavaScript 中的限制，Vue cannot detect changes to an array when you directly set an item with the index - 请改用 Vue.set(this.markedSteps, i, true)

如何根据收到的道具在组件中初始化数据并且不失去反应性

How to initialize data in component according to the received props and don't lose reactivity

javascript

vue.js

vue-component

vue-reactivity

vue-props