Question

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

执行此操作的简单方法是遍历每个v-for div上的数组，并检查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>

将事物放置在Vue中的特定迭代元素中

1 个答案: