I'm trying to include a ponent 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 ponents:

<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 ponent.

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

I'm trying to include a ponent 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 ponents:

<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 ponent.

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

• javascript
• vue.js
• vuejs2

Share Improve this question Follow asked Feb 16, 2018 at 11:31 user2810895user2810895 1,36444 gold badges1919 silver badges3535 bronze badges 1

• 1 There must be something else that is wrong with your code (possibly with your ponent). Here's a sample with the data you provided that works fine. – PatrickSteele Commented Feb 16, 2018 at 13:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

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.