0

在创建组件之前，我的初始化数据有问题。我的实际问题取决于这个问题：我在我的一个数据属性中失去了反应性，因为我在生命周期挂钩中对其进行了初始化。但我不知道如何data(){}用我从道具收到的长度初始化一个数组。如果我在生命周期钩子中完成它，那么我将失去反应性，正如我之前提到的。以下是有关我的组件的更多详细信息： 在我的 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();
  }

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

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

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

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

但是，当我单击按钮时，尽管单击按钮后，markedSteps[i] 的实际值已更改为 true，但并未像我预期的那样分配标记圆圈类。我对这些我搞砸的东西感到非常沮丧。任何帮助将不胜感激。我已经检查了有关此主题的文档，并且我已经阅读了“深度反应”部分，但我没有看到答案。

4

1 回答 1

1

有多个问题

  1. 在您的示例中，您没有显示如何初始化您的data()，但从代码this.markedSteps = [];中假设initializeMarkedSteps我认为您没有markedStepsin data()。这是第 1 个问题。数据中的属性仅在创建实例时存在（添加到）时才具有反应性markedSteps: []data()

  2. 由于 JavaScript 的限制，当您直接使用索引设置项目时，Vue 无法检测到对数组的更改-请Vue.set(this.markedSteps, i, true)改用

于 2019-12-09T19:34:54.637 回答