使用 Vuejs 嵌套 v-for 循环答案

【问题标题】：Nested v-for loop with Vuejs使用 Vuejs 嵌套 v-for 循环
【发布时间】：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 没有关系

标签： javascript arrays loops object vue.js

【解决方案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>

【讨论】：