Accessing number prop value for table colspan inside Vuetify scoped slot

Question

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?

Answer 1

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>