使用 Vuejs 嵌套 v-for 循环

Posted 2023-02-22

【中文标题】使用 Vuejs 嵌套 v-for 循环

【英文标题】：Nested v-for loop with Vuejs

【发布时间】：2020-04-04 12:37:22

【问题描述】：

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

这是数据。我希望能够遍历修饰符，而无需精确调用修饰符1、修饰符2。

想法是第一个 v-for 循环遍历修饰符对象，嵌套的 v-for 循环将遍历内部的不同块。像这样，我有一个自动嵌套的 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>

有没有可能，如果有，怎么做？ 我需要将我的数据组织成一个嵌套数组吗？ 谢谢

【问题讨论】：

首先，您需要名为 modifiers 和 blocks 的数据

什么是修饰符和方块？

@JaromandaX 这是一个例子。我尝试了不同的东西，但没有奏效。这是我正在考虑的嵌套循环。但不知道如何组织我的数据来获得这个。

嗯，循环是错误的，因为blocks 与modifiers 没有关系

【参考方案1】：

您还可以将 Object 转换为一个修饰符数组，每个修饰符都有一个嵌套的块数组：

const data = 
  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'
    
  

const modifiers = Object.keys(data).map(modifierName => (
  name: modifierName,
  blocks: Object.keys(data[modifierName]).map(blockName => (
    ...data[modifierName][blockName],
    name: blockName
  ))
));


console.log(modifiers);

然后你可以像这样循环嵌套数组：

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

【参考方案2】：

一种方法是创建一个计算属性来自引用 $data...

computed:
    myData() 
        return this.$data
    
,

然后在模板中...

<div v-for="(modifier) in myData" :key="modifier">
    <ul v-for="(block,k) in modifier" :key="k">
        <li> block.description </li>
    </ul>
</div>

Demo

【参考方案3】：

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

实际上你的代码会变成这样（扩展以突出使用循环中数据的更多方法）：

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>