Перезаписать слот шаблона динамически

Question

Выбор конфигурации некоторых заголовков из отношения belongsTo() из Laravel. Ответы выглядят так:

Моя Таблица данных Vuetify Конфигурация такая:

    <v-data-table
            :headers="newHeaders"
            :items="products"
            item-key="name"
        >
      <template v-slot:header.stocks.0.pivot.quantity="{ header }">
        {{ header.text }}
        <v-icon>
          mdi-pencil-outline
        </v-icon>
      </template>
   </v-data-table>

Я просто хочу использовать слот, чтобы добавить свой значок «динамически» ко всем добавляемым заголовкам «Сток» (может быть 1, 2 3 или более заголовков).

Как мне добиться этой функции? Я имею в виду, что сейчас статически, потому что, если добавляется еще одна акция, я должен использовать <template v-slot:header.stocks.1.pivot.quantity="{ header }">.

Отредактировано: Вот как выглядит таблица:

Answer 1

Я использую решение из этого ответа: Одинаковое содержание слотов для нескольких слотов шаблонов Это было своего рода великолепно, и это мое решение:

Тег шаблона

  <v-data-table
        :headers="newHeaders"
        :items="products"
        item-key="name"
    >
  <template 
     :slot="slotName"
     slot-scope="props"
     v-for="slotName in pivotNames">
    {{ props.header.text }}
    <v-icon>
      mdi-pencil-outline
    </v-icon>
  </template>

Тег сценария

  export default {
    name: "Product",
    data() {
        return {
          newHeaders: [...],
          products: [...],
          stockHeaders: [], //Have stock headers info
          pivotNames: [] //Used in the v-for
        }
    },
    methods: {
        getPivotHeaders() {
            const self = this;

            this.stockHeaders.forEach(function(stock, index) {
                let indexFound = stock["value"].includes("pivot.quantity");

                if (indexFound) {
                    self.pivotNames.push("header." + stock["value"]); //Create name for slot template
                }
            });
        }
    }