CODEWITHSUNDEEP
vue.jsvuetify.jsv-slot
benwasin97
benwasin97

Reputation: 263

vue.js how do I make a v-slot template dynamic?

Hello and thank you for reading my question! I am working with Vue.js, Vuetify and v-data-table and I am working on making my v-slot work with two different strings as the name of the header.

<template>
  <v-container fluid>
    <v-data-table
      :options="data"
      :headers="headers"
      :items="data
      :server-items-length="40"
      :loading="loading"
      :multi-sort="true"
      @update:options="updateThePage"
    >
      <template v-slot:[`header.overalls`]="{ header }" class="flight-date-header">
        <overallDatePicker
          :options="data"
        />
        {{ header.name }}
      </template>

      <template v-slot:[`item.name`]="{ item }">
        <p class="company-name">
          {{ item.companyName }}
        </p>
      </template>

      <template v-slot:[`item.price`]="{ item }">
          <p> {{ item.price }} </p>
      </template>

      <template v-slot:[`item.flightDate`]="{ item }">
        <p class="style">
          {{ item.startDate }}
        </p>
      </template>

    </v-data-table>
  </v-container>
</template>

and I store my headers like below

headers: [
      { text: 'Campaign Name', value: 'overalls' },
    ],

Ideally I would like the name of this slot

<template v-slot:[`header.overalls`]="{ header }" class="flight-date-header">
       <overallDatePicker
         :options="data"
       />
     </template>

To work with two different data options. right now the name of the header is overalls but I want the name of the header so ['header.overalls'] to be like ['header.('overalls' || 'shoes')] ,

The reason I am doing this is right now when I click on the header the options.sortBy property of the table gets set to 'overalls', but I want the icon on the column to show up if the options.sortBy property of the table is "overalls" and also show up if it is "shoes"

Please help and thank you so much!

Upvotes: 3

Views: 5286

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37753

To reuse the slot content for multiple headers/columns, use Vue's dynamic slots names feature + v-for

data() {
  return {
    specialHeaders: ['overalls', 'shoes'],
  }
}

<template v-for="column in specialHeaders" v-slot:[`header.${column}`]="{ header }">
  Special:{{header.text}}
</template>

Upvotes: 5

Related Questions