Javascript Vue.js:未重新呈现子组件

我正试图弄清楚如何将道具传递给子组件，以及如何从子组件更新道具

//parent.vue
上
下一个
导出默认值{
组成部分：{
子组件
},
数据（）{
返回{
arr:[[“A”、“B”、“C”]、[“D”、“E”]]，//这将从vue存储区填充
当前IDX:0
}
},
计算：{
getCurrentArray（）{
返回this.arr[this.currentIdx]
}
},
}

//child.vue
道具：{{elem}
导出默认值{
道具：[“元素”]，
数据（）{
返回{
myinput:this.elem
}
},
方法：{
保存（）{
//这个.store.dispatch（“saveChildElement”{myinput}
}
},
mounted（）{console.log（this.elem+“正在呈现”）}
}

在本例中，我有两组数组['A'、'B'、'C']和['D'、'E']。在页面加载时，第一组数组通过子组件呈现

看起来不错。但是，当我单击“下一步”转到第二组时，我得到以下信息：

因此，在正确传递道具的同时，文本框输入值不会更新。当我检查console.log时，很明显vue不会为“D”和“E”重新呈现子组件。相反，它只是将现有组件用于“A”和“B”

---

有没有办法强制vue重新渲染组件？如果没有，如何确保文本框输入获得最新的道具值？请记住，我希望能够通过vue存储保存对输入值的更改。

尝试在

v-for

循环中添加

：Key

道具

<div v-for="elem in getCurrentArray" :key="elem">

要给Vue一个提示，使其能够跟踪每个节点的标识，从而重用和重新排序现有元素，您需要为每个项目提供一个唯一的键属性：

键必须是唯一的，如果数组中有两个或多个相同的值，例如

['A'，'B'，'A']

它会产生冲突，克服这一问题的最佳方法是为每个实例添加生成的唯一“ID”

或替代方案中的（短期解决方案）

您可以将循环索引与数组值结合使用，这将为您提供一个或多或少唯一的键

---

尝试在

v-for

循环中添加

:Key

道具

<div v-for="elem in getCurrentArray" :key="elem">

要给Vue一个提示，使其能够跟踪每个节点的标识，从而重用和重新排序现有元素，您需要为每个项目提供一个唯一的键属性：

键必须是唯一的，如果数组中有两个或多个相同的值，例如

['A'，'B'，'A']

它会产生冲突，克服这一问题的最佳方法是为每个实例添加生成的唯一“ID”

或替代方案中的（短期解决方案）

您可以将循环索引与数组值结合使用，这将为您提供一个或多或少唯一的键

---

您可以要求组件重新渲染。（更新密钥的其他答案是正确的）

但是，如果您确实想使用Vuex来管理状态，我建议您首先这样做，因为（本质上）有一种不同的机制可以为您重新渲染，而且感觉更容易。即“计算属性”可能会为您解决这一问题

我记得在刚开始的时候，我在这个问题上遇到了困难，一旦我实现了Vuex，我就希望我能这样做，这就为我解决了这个问题，并将其作为其工作流程的一部分。（这可能意味着您不需要更新密钥，但您可以这样做，以防在复杂的情况下仍然需要强制重新渲染）

编辑：

---

正如@JonyB正确指出的，您正在尝试重新呈现整个组件。如果您仔细考虑，您真正想要做的不是重新呈现整个组件，而是更新状态。因此，一旦您实现Vuex，它可能会为您解决这个问题，因为它允许您单独处理状态。

您可以询问您的公司onent重新渲染。（更新密钥的其他答案是正确的）

但是，如果您确实想使用Vuex来管理状态，我建议您首先这样做，因为（本质上）有一种不同的机制可以为您重新渲染，而且感觉更容易。即“计算属性”可能会为您解决这一问题

我记得在刚开始的时候，我在这个问题上遇到了困难，一旦我实现了Vuex，我就希望我能这样做，这就为我解决了这个问题，并将其作为其工作流程的一部分。（这可能意味着您不需要更新密钥，但您可以这样做，以防在复杂的情况下仍然需要强制重新渲染）

编辑：

---

正如@JonyB正确指出的那样，您正在尝试重新呈现整个组件。如果您仔细想想，您真正想要做的不是重新呈现整个组件，而只是更新状态。因此，一旦您实现Vuex，它可能会为您解决这一问题，因为它允许您单独处理状态。

您只需要添加他将

键

转到

v-for

循环，它将工作

替换

与

---

Ref:

您只需将

键添加到
v-for
循环中，它就会工作

替换


与


Ref:
添加一个键，正如cool man所说，它会解决问题

但是，您对组件重新呈现的检查有缺陷，您使用了子装入的生命周期，并且因为您只看到它运行一次，您认为组件没有重新呈现。但这是错误的。“装入”只发生一次