具有v-for的组件，用于不呈现

Question

我正在尝试添加v-for的组件。数据源infoTexts是一个Object，其中包含区域设置代码作为键，消息作为值。 例如：

{
    nl: 'Text in Dutch',
    fr: 'Text in French',
    en: 'Text in English'
}

以下是我用来包含组件的代码：

<text-editor v-for="(value, index) in infoTexts" :key="index" :database-message-contents="value" :message-locale-code="index"></text-editor>

database-message-contents和message-locale-code都是text-editor组件的道具。

我的控制台中未收到任何错误消息，但text-editor未显示。

Answer 1

这个问题涉及对Vue生命周期的误解。 我在infoTexts方法中创建了mounted。将其重新定位到created方法可以解决问题。

Answer 2

您自己对问题的回答只是部分正确，可能会误导其他用户。

让我解释原因：

• 此问题的根源不在于使用错误的Vue生命周期方法
• v-for 本身是被动的，这意味着您可以在生命周期的任何时候添加元素，它只会重新渲染。

您mounted方法中的假设代码：

this.infoTexts.nl = 'Text in Dutch'

此代码不起作用，因为 Vue无法检测在运行时添加到对象的属性。

您应该做的是使用提供的Vue.set方法。 所以你的新代码看起来就像这样。

Vue.set(this.infoTexts, 'nl', 'Text in Dutch');

使用上面的代码，您可以随时根据需要添加新语言。

即使您没有提供显示infoTexts数组创建的代码，这也会导致95％的问题。