Component with v-for not rendering

Question

I'm trying to include a component with v-for. The data source infoTexts is an Object containing the locale code as a key and the message as value. Example:

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

Below is my code that I use to include the components:

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

Both database-message-contents and message-locale-code are props on the text-editor component.

I don't receive any error message in my console, but the text-editor is not showing up.

Answer 1

The issue involved a misunderstanding with the life cycle of Vue. I was creating the infoTexts in the mounted method. Relocating it to the created method solved the issue.

Answer 2

Your own answer to your problem ist only partially true and can mislead other users.

Let me explain why:

• The root of this problem doesn't lie in using the wrong Vue lifecycle methods
• v-for itself is reactive which means you can add an element at any point during the lifecycle and it would just re-render.

Assumed code in your mountedmethod:

this.infoTexts.nl = 'Text in Dutch'

This code does not work because Vue cannot detect properties added to objects at runtime.

What you should be doing instead is using the Vue.set method provided. So your new code would look something like this.

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

Using the code above you can add new languages whenever you want and in whatever lifecycle method you want.

Even if you didn't provide the code showing the creation of your infoTexts array this is causing the problem 95% of the time.