[Vuejs]-Two different objects in a nested v-for loop VueJS

by

0👍

✅

I eventually found the solution, so I put it here to solve my problem.

There was a mistake in the data organization, and once that was corrected, a little modification in the loops’ structure.

No more block objects, but rather a modifiers array. It reduces the loop numbers and everything works.

componants: {
  element1: {
    base: {
      title: `Example`,
      description: `Color Modifier`,
      modifierClass: `Color ModifierClass`,
    },
    modifiers: [{
        /* Modifier Class */
        class: 'doc_button--green',
        /* Description of the usage of the class */
        description: 'Primary Button'
      },
      {
        class: 'doc_button--orange',
        description: 'Secondary Button'
      },
      {
        class: 'doc_button--red',
        description: 'Tertiary Button'
      }
    ],
  },
  element2: {
    base: {
      title: `Example`,
      description: `Size Modifier`,
      modifierClass: `Size ModifierClass`,
    },
    modifiers: [{
        class: 'doc_button--small',
        description: 'Small Button'
      },
      {
        class: 'doc_button--big',
        description: 'Big Button'
      },
    ]
  }
},

<template>
  <div>
    <div v-for="(componant) in modifier" :key="componant">


      <!-- <div v-for="(element, l) in componant[0]" :key="l"> -->
      <h2 class="doc_title">
        {{componant.base.title}}
      </h2>

      <p class="doc_description">
        {{componant.base.description}}
      </p>

      <h3 class="doc_subtitle">
        {{componant.base.modifierClass}}
      </h3>
      <!-- </div> -->

      <ul class="doc_list doc_list--parameters" v-for="(modifier) in componant.modifiers" :key="modifier">

        <li class="doc_list-text">
          <p>{{modifier.class}}</p> : <p>{{modifier.description}}</p>
        </li>
      </ul>

      <div class="doc_row">
        <div class="doc_list-container">
          <ul class="doc_list" v-for="(modifier) in componant.modifiers" :key="modifier">

            <div class="doc_list-element" v-html="parentData.core.html"
              :class="[parentData.core.class, `${modifier.class}`]">
            </div>

            <p class="doc_element-text"> {{modifier.class}} </p>
          </ul>
        </div>
      </div>

      <pre class="doc_pre">
                <code class="language-html doc_code">   
                    <div v-text="parentData.core.html">
                    </div>
                </code>
            </pre>
    </div>

  </div>
</template>

Leave a comment