Is there a way to neaten up deeply nested objects during a v-for loop?

JCoulam 0
Viewed 30

I'm currently working on a project in Vue that uses the WP-Rest api. I'm bored of tediously nested objects when looping through objects. While I can destructure top-level objects, I'm not sure how make things like this: page.page.featuredImage.node.altText less ugly. Can anyone offer any good practices for handling nested objects within Vue loops?

    <div v-for="(page, index) in pageGrid" :key="index"
      class="flex flex-col overflow-hidden rounded-lg shadow-lg">
      <div v-if="page.page.featuredImage" class="flex-shrink-0">
        <img class="h-48 w-full object-cover" :alt="page.page.featuredImage.node.altText"
          :sizes="page.page.featuredImage.node.sizes" :srcset="page.page.featuredImage.node.srcSet" />
vuejs3 vue.js
2 Answers

Sometimes that is why to do it in the other hand you can map over your data when mounted for instant and return a new array that looks the way you want.

I am not sure how your data looks but I think you could also do something like this:


    <div v-for="(page, index) in pageGrid.page" :key="index">
MaxCode0

As per your template code, You are having below data structure contains by pageGrid.

[
  {
    page: {
      featuredImage: {
        node: {
          altText: 'Text 1',
          sizes: 'small',
          srcSet: 'image src link'
        }
      }
    }
  },
  {
    page: {
      featuredImage: {
        node: {
          altText: 'Text 1',
          sizes: 'small',
          srcSet: 'image src link'
        }
      }
    }
  },
  ...
  ...
]

To make this simple, You can move the whole node object into a separate array with the help of Array.map() method and then it will easy to iterate in the template.

pageGrid.map(({ page }) => page.featuredImage.node);

Live Demo :

new Vue({
  el: '#app',
  data: {
    pageGrid: [
      {
        page: {
          featuredImage: {
            node: {
              altText: 'Text 1',
              sizes: 'small',
              srcSet: 'image 1 src link'
            }
          }
        }
      },
      {
        page: {
          featuredImage: {
            node: {
              altText: 'Text 2',
              sizes: 'medium',
              srcSet: 'image 2 src link'
            }
          }
        }
      }
    ],
    updatedPageGrid: []
  },
  mounted() {
    this.updatedPageGrid = this.pageGrid.map(({ page }) => page.featuredImage.node);
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(page, index) in updatedPageGrid" :key="index">
    {{ page.altText }}
    {{ page.sizes }}
    {{ page.srcSet }}
  </div>
</div>

Rohìt Jíndal0
Related