使用vue-virtual-scroller不显示

Question

我正在尝试https://github.com/Akryum/vue-virtual-scroller，但是我不能让它工作。我做错了什么？

我使用pug / jade来呈现服务器端的HTML。我没有收到任何错误消息，但是没有任何东西被渲染...

Pug / Jade

#test

  recyclescroller.scroller(:items='active_projects' :item-size='32' key-field='id' v-slot='{ item }')
    
    .user
         | {{ item.name }}

CSS

.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

javascript

Vue.component('RecycleScroller', VueVirtualScroller.RecycleScroller)

test = new Vue({

    el: '#test',

    data: {
           active_projects        : [{name : 'test'}]
          }
})

Answer 1

当你使用回收器时，你应该在每一件物品里面都有id

因为项的uniqueness是通过使用id

您的列表应如下所示：

​

data () {
        return {
            active_projects: [
                {
                    name: 'test', id: 1
                },
                {
                    name: 'test', id: 2
                },
                {
                    name: 'test', id: 3
                },
                {
                    name: 'test', id: 4
                },
            ]
        }
    }

​

Doc - Important notes

如果项目是对象，则滚动条需要能够识别它们。默认情况下，它将在项目上查找id字段。如果您使用的是另一个字段名称，则可以使用keyField属性进行配置。