Question

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

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

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

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

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

{{1}}

有可能吗？如果可以，怎么办？我需要将我的数据组织到一个嵌套数组中吗？谢谢

Answer 1

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

实际上，您的代码将变成这样（展开以突出显示更多使用循环数据的方法）：

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>

Answer 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

Answer 3

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

std::unordered_map

然后您可以像这样循环遍历嵌套数组：

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);

Vuejs的嵌套v-for循环

3 个答案: