Vue js : v-bind properties in v-for

Question

quick question.

Trying to figure out (if its even possible) how can I say template length by binding properties into one object and then using v-bind to bind it

problem is I'm using v-for, so I've got deconstructed objects

<tb-header v-for="(field, index) in tableFields"
                               :id="`header${+parseInt(index)+1}`"
                               v-bind="binds.styleProperties.header"
                               :field="field"
                               :col-num="index+1"
                               :style="field.thStyle"
                               :class="field.thClass"
                               :key="index">
                    </tb-header>

I can't figure out how to create a "bind" that's shorter (like... :field="field" is dependent on the v-for deconstruction)

any ideas?

Answer 1

I'm not sure if I understood the question, but if you want to create a bind that is shorter, probably you can do something like:

<tb-header v-for="({ thStyle, thClass, ...field }, index) in tableFields"
   :id="`header${+parseInt(index)+1}`"
   v-bind="binds.styleProperties.header"
   :field="field"
   :col-num="index+1"
   :style="thStyle"
   :class="thClass"
   :key="index">
</tb-header>

Let me know if that helps.