Vuejs & Vuetify : vuetify (v-slot dynamic)에서 데이터 테이블을 사용하여 템플릿을 루프하는 방법이 있습니까?

Vuejs & Vuetify : vuetify (v-slot dynamic)에서 데이터 테이블을 사용하여 템플릿을 루프하는 방법이 있습니까?

서버측 페이지 번호, 검색 필드 및 필터 가능한 필드가 있는 데이터 테이블이 여러 개 있습니다.

단, 컴포넌트를 생성하여 같은 것을 세 번 수정하지 않도록 소품을 사용할 수 있도록 하고 싶습니다.

vuetify(v-slot dynamic)에서 데이터 테이블을 사용하여 템플릿을 루프하는 방법이 있습니까?

예를 들어 다음과 같습니다.

<template v-slot:header.id="{ header }">
    <div class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy('id')">
            ID
            <v-icon class="ml-2">{{icon.id}}</v-icon>
        </span>
        <v-text-field v-model="searcher.ticket_id.value" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>


<template v-slot:header.name="{ header }">
    <div class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy('name')">
            Nom du ticket
            <v-icon class="ml-2">{{icon.name}}</v-icon>
        </span>
        <v-text-field v-model="searcher.ticket_name.value" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>

기능하지 않음:

<template v-for="(item, i) in headers" v-slot:item.text="{ header }">
    <div class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy(item.name)">
            {{item.name}}
            <v-icon class="ml-2">{{icon[item.name]}}</v-icon>
        </span>
        <v-text-field v-model="item.searcher" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>

를 추가하면key,있습니다'<template>' cannot be keyed. Place the key on real elements instead

이걸 제거하면Elements in iteration expect to have 'v-bind:key' directives

하지만 그 반대인 정보원을 발견했어요

https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

수정: 슬롯에서 v-for-key 요구는 발생하지 않습니다.

vue-language-server : 반복 요소에는 'v-bind:key' 지시문이 필요합니다.

감사합니다.

20/12 편집:

https://github.com/vuejs/eslint-plugin-vue/issues/1006

vuetify 데이터 테이블을 사용하여 v-slot 속성을 동적으로 만들려면 어떻게 해야 합니까?

제 코드는 다음과 같습니다.

<template v-for="(head, i) in headers" v-slot:header[header.value]="{header}">
    <div :key="i" class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy('id')">
            {{head}} <br> {{header}}
            <v-icon class="ml-2">{{icon.id}}</v-icon>
        </span>
        <v-text-field v-model="searcher.ticket_id.value" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>

테이블 열에 장착할 수 없습니다.

사용할 필요가 있다v-slot:header.id="{header}"id 컬럼에 탑재되어 있는 것을 만들어야 합니다.idmy loop에 따라 dynamic

어떻게 하는 거야?

감사합니다.

찾았다

나는 덧붙였다.head: 'header.id'내 리스트에서 내가 사용할 수 있도록<template v-for="(head, i) in headers" v-slot:[headers[i].head]="{header}">

해야만 했다

<template v-for="(col, i) in filters" v-slot:[`header.${i}`]="{ header }">

나 같은 경우에는

filters: { 'name': [], 'calories': [] },

언급URL : https://stackoverflow.com/questions/59413872/vuejs-vuetify-is-there-a-way-to-loop-around-template-with-datatable-from-vue