javascript - 使用 Vuejs 嵌套 v-for 循环

Question

我需要在 Vuejs 中嵌套 v-for 循环，但对如何做到这一点、如何组织我的数据和 v-for 循环有疑问。

这是数据。我希望能够迭代修饰符，而不需要精确调用修饰符1，修饰符2。

这个想法是，第一个 v-for 循环遍历修饰符对象，而嵌套的 v-for 循环将遍历内部的不同 block 。像这样，我有一个自动嵌套的 v-for 循环。

modifiers1: {
  block1: {
    class: 'doc_button--green',
    description: 'Primary Button'
  },
  block2: {
    class: 'doc_button--orange',
    description: 'Secondary Button'
  },
  block3: {
    class: 'doc_button--red',
    description: 'Tertiary Button'
  }
},
modifiers2: {
  block1: {
    class: 'doc_button--small',
    description: 'Small Button'
  },
  block2: {
    class: 'doc_button--big',
    description: 'Big Button'
  }
}

我想到的一个简单的循环示例是:

<div v-for="(modifier) in modifiers" :key="modifier">
 <ul v-for="(block) in blocks" :key="block">
   <li></li>
 </ul>
</div>

这可能吗？如果可能的话，如何实现？ 我需要将数据组织到嵌套数组中吗？ 谢谢

Answer 1

假设您的数据结构存储在变量modifiers中，您只需调整第二个v-for以循环modifiers第一个 v-for 中的 code> 变量。

实际上，您的代码将变成这样(扩展以突出显示使用循环中的数据的更多方法):

let modifiers = {
  modifier1: {
    block1: {
      class: 'doc_button--green',
      description: 'Primary Button'
    },
    block2: {
      class: 'doc_button--orange',
      description: 'Secondary Button'
    },
    block3: {
      class: 'doc_button--red',
      description: 'Tertiary Button'
    }
  },
  modifier2: {
    block1: {
      class: 'doc_button--small',
      description: 'Small Button'
    },
    block2: {
      class: 'doc_button--big',
      description: 'Big Button'
    }
  }
}

<div v-for="(blocks, modifier) in modifiers" :key="modifier">
  <ul v-for="(block, name) in blocks" :key="name">
    <li v-for="(value, key) in block" :key="key">{{key}}: {{value}}</li>
  </ul>
</div>