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

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

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

created（）{
for（设i=0；i

我将它们分配给一个名为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”传递给单元组件，但是，即使生成了数字，它们也不会传递给组件。尽管如此，如果我用数字手动填充数组，元素会传递给单元组件。解决此问题的最佳方法是什么？我假设这是因为计算失败在组件渲染后，我会使用ish，但我不知道如何在道具更改后更新组件。我尝试使用手表，但它不起作用

---

谢谢！

用这行代码你到底想达到什么目的

我重新创建了这个示例，将元素

x

传递到

单元格

似乎相对简单

如果您只是想将

x

作为

prop

传递，那么您可以编写：

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

这就好像您试图访问索引为230的

元素，例如只有10个元素


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

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


您的意思是当props=
id
发生更改时，组件=
单元格
不会更新？这不应该是反应性问题-。rng[x-1]的目的是什么

？这是从所访问数组的索引中减去1，您确定这是您想要的吗？具有重复的

id

s是无效的HTML。尝试访问

n

大于数组长度的数组的

n

第四个成员是无效的JavaScript。最后，但并非最不重要的一点是，使用重复键将中断Vue正确跟踪项目的能力。提供有效代码，Vue将按预期工作。谢谢！我没有考虑正确访问阵列的方式，关键技巧也很有用。

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