更新道具后重新加载vuejs组件的最佳方法是什么？

Question

首先，我使用rng生成一些要传递到我的api调用中的数字

created() {
for (let i = 0; i < this.cellNumber; i++) {
  this.rng.push(Math.floor(Math.random() * 671 + 1));
}

我将它们分配给名为rng的数组。我正在使用v-for指令渲染一个名为Cell的组件

    <div v-for="x in rng" :key="x">
      <div class="col-sm-12">
        <Cell class="cells" :id="rng[x - 1]"></Cell>
      </div>
    </div>

这应该将rng中的元素'x'传递给Cell组件，但是，即使生成了数字，也不会传递给该组件。但是，如果我用数字手动填充数组，则元素将传递到Cell组件。解决此问题的最佳方法是什么？我认为这是因为在渲染组件之后计算就完成了，但是我不知道一旦prop更改了如何更新组件。我尝试使用手表，但是没有用。

谢谢！

Answer 1

此行Api_Type到底要实现什么？

我重新创建了示例，并将元素:id="rng[x - 1]"传递到x似乎相对简单。

如果您只是想将Cell作为x传递，则可以这样写：

prop

您可以看看here。

---

由于生成的数字很大，所以此行将不起作用（元素不存在）：

<div v-for="x in rng" :key="x">
  <div class="col-sm-12">
    <Cell class="cells" :id="x"></Cell>
  </div>
</div>

就好像您尝试使用:id="rng[x - 1]" //if x is 231 ---> rng[230] 为230的元素访问该元素一样，例如，只有10个元素。

---

注意，数字可能会重复-这就是为什么将index用作x并不是一个好主意。例如，您可以将其替换为索引。

key