将东西放在 Vue 中的特定迭代元素中

Question

假设我使用v-for 创建了 20 个divs。 然后假设我在一个数组中有很多数据，并且该数组的每个无序元素都属于 20 个 divs 之一（它们有一个 index 或告诉它们所属位置的东西，但不一定是全部他们）。

执行此操作的简单方法是在每个 v-for divs 上迭代数组并检查 indexes 是否匹配，如果匹配，则渲染它们。带有v-if element_index == for_index 的东西。但这确实效率低下，因为如果有很多数据并且v-for 有很多迭代，这对于一个简单的网页来说会增长很多。

有没有办法做相反的事情？那么先生成这20个div，然后遍历数据数组，将它们一个一个插入到它们所属的位置？

Answer 1

我会使用reduce 创建一个以分组索引为键的“桶”对象。

reduce() 方法对数组的每个成员执行（您提供的）reducer 函数，从而产生单个输出值。

示例

new Vue({
  el: '#app',
  data() {
    return {
      dataArray: []
    }
  },
  computed: {
    bucket () {
      return this.dataArray.reduce((obj, item) => {
        if (!obj.hasOwnProperty(item.index)) {
          Object.assign(obj, {
            [item.index]: [item]
          })
        } else {
          obj[item.index].push(item)
        }
        return obj
      }, {})
    }
  },
  created() {
    for (i = 0; i < 10; i++) {
      this.addData()
    }
  },
  methods: {
    addData() {
      this.dataArray.push({
        index: Math.ceil(Math.random() * 3),
        name: Math.random().toString(36).substring(7)
      })
    },
    removeData() {
      this.dataArray = this.dataArray.slice(1)
    }
  }
})

<div id="app">
  <button @click="addData(true)">Add Data</button>
  <button @click="removeData">Remove Data</button>
  <div v-for="key in Object.keys(bucket)" :key="key">
    <h3 style="font-family: monospace">Bucket {{ key }} ({{ bucket[key].length }} items)</h3>
    <p v-for="(item, index) in bucket[key]" :key="item.name" style="font-family: monospace; border-bottom: 1px solid rgba(96,125,139,.1)">{{ index + 1 }}. {{ item.name }}</p>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-template-compiler@2.5.17/browser.min.js"></script></script>