CODEWITHSUNDEEP
vue.jsvuejs2
Rick Strahl
Rick Strahl

Reputation: 17671

VueJS - v-for and attributes on the parent Element

I'm working with a table display and am using vueJS to render a group of rows inside of a table. The bindings inside of the <tr> work fine, but I can't figure out how to bind say an attribute that lives on the parent <tr> that hosts the v-for directive:

<tr v-for="detailItem in itemList" data-key="{detailItem.pk}}">
        <td>{{detailItem.cdesc}}</td>
        <td>{{(detailItem.nnetunits * 1).toFixed(2)}}</td>
        ...
</tr>

In this code the inner items on the <td> bind just fine, but how would you get the data-key bound?

Upvotes: 0

Views: 5306

Answers (1)

Bert
Bert

Reputation: 82469

With Vue 2 you don't use interpolation in attributes, you use the attribute binding syntax.

<tr v-for="detailItem in itemList" v-bind:data-key="detailItem.pk">

Or the shortcut

<tr v-for="detailItem in itemList" :data-key="detailItem.pk">

Upvotes: 4

Related Questions