CODEWITHSUNDEEP
javascriptvue.js
Shwmae
Shwmae

Reputation: 91

Iterate through array of objects not working in VueJS

I am trying to loop through a nested array of objects in VueJS. I am using a <script type="x-template" id="article-content"> </script> to render my

I have tried looping through the component attaching a v-for onto it but still nothing gives me the data back. This approach is working on other components but doesn't appear to be working on this specific field.

Component template

<script type="text/x-template" id="article-content">
    <article class="content__article"
        v-for="contentItem in article.content">

      <!-- THIS DOESN'T RENDER CONTENT -->

       <p class="id"> {{ contentItem.id }}</p>
       <p class="type"> {{ contentItem.type }} </p>
       <div v-html="contentItem.content"></div>
    </article>
</script>

XHR call will populate article property

const article = new Vue({
    el: "#article-content",
    data: {
       article: { 
        'id': '',
        'publishDate': '', 
        'content': [], // array of content items
       }
    }
});

Vue.component('article-content', {
    template: '#article-content',
    props: ['article'],
});

Article content component for rendering

<article-content
   v-bind:key="article.id"
   v-bind:article="article">
</article-content>

Upvotes: 0

Views: 1327

Answers (1)

N. Djokic
N. Djokic

Reputation: 1046

Edit: Try something like this.

Modify article-content component as fallows: 

   Vue.component('article-content', {
        template: '<div>
                      <p class="id"> {{ article.content.id }}</p>
                      <p class="type"> {{ article.content.type }} </p>
                      <div v-html="article.content.id"></div>
                   <div>',
      props: {
      article: Object,
    },
    });

And then render your content as fallows:

 <article-content v-for="contentItem in article"
       v-bind:key="contentItem.content.id"
       v-bind:article="contentItem">
    </article-content>

Upvotes: 1

Related Questions