Доступ к числовому значению свойства для таблицы colspan внутри слота с областью действия Vuetify

Question

У меня есть дочерний компонент, который используется несколькими родительскими компонентами, который содержит таблицу v-данных Vuetify, а часть таблицы данных используетbody.prependслот. В этом конкретном случае структура таблицы используется для установки некоторых списков выбора, а для согласования с заголовками столбцов используетсяcolspan ценность:

<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>

Тем не менее colspan значение должно варьироваться между реализациями, поэтому я хотел бы передать значение свойства (numBlankHeadersзначение выше). Согласно странице props docs, вы должны использоватьv-bind чтобы сообщить Vue, что это JS-выражение, а не строка, поэтому я определяю опору следующим образом:

props:{
  numBlankHeaders: {
    type: Number,
    default: 7
  }
}

а затем я передаю его так:

<BaseProjectTable
  :headers="Oppheaders"
  :items="opps"
  :search="search"
  :loggedInUser="loggedInUser"
  title="Opportunities"
  :showPracticeFilter=false
  :numBlankHeaders="6"
></BaseProjectTable>

Однако значение, которое я передаю в качестве опоры, вообще не действует, независимо от того, использую ли я значение по умолчанию или передаю значение, как указано выше. Другие реквизиты используются в начальном фрагменте кода (например,<td v-if="showPracticeFilter">), поэтому я знаю, что внутри слота используются реквизиты. Что мне нужно изменить, чтобы получитьnumBlankHeaders опора работать на colspan ценность?

Answer 1

Для привязки значения атрибута к нему в шаблоне должен быть добавлен префиксv-bind: или :. В вашем примере это будет префикс двоеточия наcolspan:

<td :colspan="numBlankHeaders"></td>