javascript - 嵌套的 v-for 循环 VueJS 中的两个不同对象

Question

我遇到了一个问题，但与我之前的问题仍然不同。

这是我的数据对象：

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

以及我如何将它用于嵌套循环：

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


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

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

      <h3 class="doc_subtitle">
        {{element.modifierClass}}
      </h3>
    </div>


    <div v-for="(modifier) in componant" :key="modifier">
      <ul class="doc_list doc_list--parameters" v-for="(block,k) in modifier" :key="k">
        <li class="doc_list-text">
          <p>{{block.class}}</p> : <p>{{block.description}}</p>
        </li>
      </ul>

      <div class="doc_row">
        <div class="doc_list-container">
          <ul class="doc_list" v-for="(block,k) in modifier" :key="k">

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

            <p class="doc_element-text"> {{block.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>
</div>

我应该只得到带有颜色的第二排圆圈，并且不明白为什么我得到第一排未定义的圆圈。

在修饰符: 中多了一层数据，与 base: 相比。但是我又添加了一个 v-for 循环，所以它不应该工作吗？

谢谢。

标签： javascriptarraysloopsobjectvue.js

Answer 1

我最终找到了解决方案，所以我把它放在这里来解决我的问题。

数据组织中有一个错误，一旦纠正，循环结构就会稍作修改。

不再有块对象，而是一个修改器数组。它减少了循环次数，一切正常。

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>