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?

score 1 · Answer 1 · answered May 26 '21 at 16:08

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 '21 at 16:08

Anup

589
4
8

The OP's code is shorthand for what you're proposing. – tony19 May 26 '21 at 16:09

score 1 · Accepted Answer · answered May 26 '21 at 16:10

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

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? — etayluz, May 26 '21 at 16:18
@etayluz Just do `{{ verse.join(' ') }}` ([demo](https://codepen.io/tony19/pen/yLMoYNL)). — tony19, May 26 '21 at 16:29

score 1 · Answer 3 · answered May 26 '21 at 16:15

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>

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

3 Answers3