When using vue-virtual-scroller where does content-tag and main-tag come from

Question

I am trying to understand the vue virtual scroller. I noticed in the demo there are a couple HTML attributes it uses...

<virtual-scroller v-if="scopedSlots" class="scroller" :item-height="itemHeight" :items="items" main-tag="section" content-tag="table" :buffer="buffer" :pool-size="poolSize">

link to the specific line on source code

Where does this ability come from and where is the documentation for it?

score 0 · Answer 1 · edited Jul 16 '22 at 05:38

0

Breakdown:

v-if - vue directive
class - normal html attribute that you probably already know.
item-height- computed Method.
items - data object property.
buffer - data object property
pool-size - data object property

please notice that item-height for example is written as kebab-case on the html side, but should be written with camelCase on the javascript side. like so: itemHeight

about the content-tag, main-tag - worth a shot to ask the developer on github. those are not part of official vue api, nor part of html spec.

edited Jul 16 '22 at 05:38

tony19

125,647
18
229
307

answered Oct 19 '17 at 16:35

LiranC

2,400
1
27
55

I got all those I was trying to figure out where those properties came from. Was it that project or another one. – Jackie Oct 20 '17 at 15:22
what? didnt understand u – LiranC Oct 20 '17 at 18:55
How do I find where these are declared. Assuming they are declared in this project. – Jackie Oct 20 '17 at 22:48
Read the answer. The data object properties are declared. In they are written in camel-case. Pool-size is poolSize. – LiranC Oct 20 '17 at 22:51

score 0 · Answer 2 · answered Jul 09 '18 at 15:58

These are props declared in ../src/components/VirtualScroller.vue.

Both "content-tag" and "main-tag" are props of type String, meaning you can pass your choice of html elements. In your copied example, "section" and "table" is being passed to each prop, which is simply a string. If no value is passed, it would default to "div", which was set here: https://github.com/Akryum/vue-virtual-scroller/blob/master/src/components/VirtualScroller.vue

The string can also be passed dynamically, as they do for :item-height="itemHeight", where you would have :main-tag="mainTag" or :main-tag="anyCustomMainTag". This would allow you to set mainTag or anyCustomMainTag to your string value, which would also override the default div.

When using vue-virtual-scroller where does content-tag and main-tag come from

2 Answers2