I have a child component that is utilized by multiple parent components that contains a Vuetify v-data-table, and part of the data table uses the body.prepend
slot. In this particular case, a table structure is being used to set some select lists, and in order to align with the column headers, it's using the colspan
value:
<v-data-table>
...
<template v-slot:body.prepend>
<tr>
<td colspan="numBlankHeaders"></td>
<td v-if="showPracticeFilter">
<v-select
v-model="selectedPractices"
:items="practices"
label="Select Practice"
multiple
chips
deletable-chips
small-chips
dense
></v-select>
</td>
<td v-if="showSEFilter">
<!-- <v-text-field v-model="selectedSE" type="text" label="SE"></v-text-field> -->
<v-select
v-model="selectedSEs"
:items="ses"
label="Select SE"
multiple
chips
deletable-chips
small-chips
dense
></v-select>
</td>
<td v-if="showStatusFilter">
<v-select
v-model="selectedStatuses"
:items="statuses"
:menu-props="{ maxHeight: '400' }"
label="Select Status"
multiple
chips
deletable-chips
small-chips
dense
></v-select>
</td>
</tr>
</template>
</v-data-table>
However, the colspan
value needs to be vary between implementations, so I would like to pass in a prop value (the numBlankHeaders
value above). According to the props docs page, you have to use v-bind
to tell Vue that this is a JS expression rather than a string, so I define the prop like this:
props:{
numBlankHeaders: {
type: Number,
default: 7
}
}
and then I pass it in like so:
<BaseProjectTable
:headers="Oppheaders"
:items="opps"
:search="search"
:loggedInUser="loggedInUser"
title="Opportunities"
:showPracticeFilter=false
:numBlankHeaders="6"
></BaseProjectTable>
However, the value I'm passing in as a prop isn't taking effect at all, whether I use the default value or pass in a value as above. Other props are being used in the initial code snippet (e.g. <td v-if="showPracticeFilter">
), so I know props are being used inside the slot. What do I need to change to get my numBlankHeaders
prop to work for the colspan
value?
To bind an attribute value, it needs to be prefixed in the template by v-bind:
or :
. In your example, that would be a colon prefix on colspan
:
<td :colspan="numBlankHeaders"></td>