Vue: How to do a nested loop and traverse a multidimensional array?

Question

I have a multidimensional array called verses:

export default {
  name: "Example",
  data: () => ({
    verses: [['First', 'Verse'], ['Second', 'Verse']]
  })
}

I am trying to traverse the multidimensional verses array as such:

<p v-for="(verse, verse_index) in verses" :key="verse_index">
    <div v-for="(word, word_index) in verse" :key="word_index">
        {{ word }}
    </div>
</p>

I am getting this error:

[Vue warn]: Property or method "verse" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

How do I traverse a multidimensional array in Vue?

tony19 · Accepted Answer · 2021-05-26 16:10:23Z

1

The <p> element cannot contain a <div>, so the browser hoists it outside, resulting in this template:

<p v-for="(verse, verse_index) in verses" :key="verse_index">
</p>
<div v-for="(word, word_index) in verse" :key="word_index">
  {{ word }}
</div>
<p></p>

Notice how the second v-for is outside the first v-for that defined verse.

If you really intended to insert the <div> inside <p> for some reason, you can workaround the issue by wrapping the <div> in a <template> to prevent the browser from parsing it:

<p v-for="(verse, verse_index) in verses" :key="verse_index">
  <template> 👈
    <div v-for="(word, word_index) in verse" :key="word_index">
        {{ word }}
    </div>
  </template>
</p>

demo

answered May 26, 2021 at 16:10

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

etayluz Over a year ago

Is there a way to traverse over the words in the verse without any tag (div or otherwise)? I just want all the words to go into the p tag. How can that be achieved without the use of any tag?

tony19 Over a year ago

@etayluz Just do {{ verse.join(' ') }} (demo).

Anup · Accepted Answer · 2021-05-26 16:08:05Z

1

Not sure if you are passing the data value correctly, but I have changed that a bit and its working fine for me .

   data:  () => {
    return {
      verses: [['First', 'Verse'], ['Second', 'Verse']]
    }
   }

And one suggestion. Its not recommended to use div tag inside a p tag

answered May 26, 2021 at 16:08

Anup

6295 silver badges8 bronze badges

1 Comment

tony19 Over a year ago

The OP's code is shorthand for what you're proposing.

scar-2018 · Accepted Answer · 2021-05-26 16:15:52Z

1

There is nothing wrong with using vue syntax in the above code.

The problem is because <div> is inside <p>

So this will work

<div v-for="(verse, verse_index) in verses" :key="verse_index">
  <div v-for="(word, word_index) in verse" :key="word_index">
    {{ word }}
  </div>
</div>

answered May 26, 2021 at 16:15

scar-2018

5282 silver badges10 bronze badges

Collectives™ on Stack Overflow

Vue: How to do a nested loop and traverse a multidimensional array?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related