Iterate through array of objects not working in VueJS

Question

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>

N. Djokic · Accepted Answer · 2019-08-30 15:31:36Z

1

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>

edited Aug 30, 2019 at 15:31

answered Aug 30, 2019 at 14:38

N. Djokic

1,0561 gold badge8 silver badges21 bronze badges

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

2 Comments

Shwmae Over a year ago

<article> is just a HTML5 element within the script x-template. That could well be a <div> for argument's sake.

N. Djokic Over a year ago

So you defined your Vue instance on element with #article-content id. Then you defined article-content component. In template of article-content you should put your html and properties how that component should look like instead of just putting selector there. So then inside <div id="#article-content"></div> you should put <div v-for contentItem in article.content> <article-content //set values of properties> </article-content></div>. Because I do not see purpose of making component if you do not use them.

Collectives™ on Stack Overflow

Iterate through array of objects not working in VueJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related