search

mannyyang / vuetable-3

data table simplify! -- datatable component for Vue 2.x. An updated fork of the one built by ratiw as that seemed to be unmaintained. See documentation at
https://mannyyang.github.io/vuetable-3/
MIT License
23 stars 4 forks source link

Fix Build Error #20

Closed deepdivedylan closed 1 year ago

deepdivedylan commented 1 year ago

TL; DR

In a project utilizing vuetable-3, our build system is stopped by a build error that traces through the package. The cause is the key attribute not being correctly implemented in v-for loops. This pull request resolves this problem.

Full Build Error

ERROR in ./node_modules/vuetable-3/src/components/Vuetable.vue?vue&type=template&id=3ee642bc (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./node_modules/vuetable-3/src/components/Vuetable.vue?vue&type=template&id=3ee642bc)
Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):

VueCompilerError: <template v-for> key should be placed on the <template> tag.
at /home/deepdivedylan/node_modules/vuetable-3/src/components/Vuetable.vue:11:17
9  |                <component
10 |                  :is="header"
11 |                  :key="headerIndex"
   |                  ^^^^^^^^^^^^^^^^^^
12 |                  @vuetable:header-event="onHeaderEvent"
13 |                ></component>
 @ ./node_modules/vuetable-3/src/components/Vuetable.vue?vue&type=template&id=3ee642bc 1:0-172 1:0-172
 @ ./node_modules/vuetable-3/src/components/Vuetable.vue 1:0-69 8:68-74
 @ ./static-src/main.js 10:15-75

ERROR in ./node_modules/vuetable-3/src/components/Vuetable.vue?vue&type=template&id=3ee642bc (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./node_modules/vuetable-3/src/components/Vuetable.vue?vue&type=template&id=3ee642bc)
Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):

VueCompilerError: <template v-for> key should be placed on the <template> tag.
at /home/deepdivedylan/node_modules/vuetable-3/src/components/Vuetable.vue:39:17
37 |                <component
38 |                  :is="header"
39 |                  :key="headerIndex"
   |                  ^^^^^^^^^^^^^^^^^^
40 |                  @vuetable:header-event="onHeaderEvent"
41 |                ></component>
 @ ./node_modules/vuetable-3/src/components/Vuetable.vue?vue&type=template&id=3ee642bc 1:0-172 1:0-172
 @ ./node_modules/vuetable-3/src/components/Vuetable.vue 1:0-69 8:68-74
 @ ./static-src/main.js 10:15-75

ERROR in ./node_modules/vuetable-3/src/components/Vuetable.vue?vue&type=template&id=3ee642bc (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./node_modules/vuetable-3/src/components/Vuetable.vue?vue&type=template&id=3ee642bc)
Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):

VueCompilerError: <template v-for> key should be placed on the <template> tag.
at /home/deepdivedylan/node_modules/vuetable-3/src/components/Vuetable.vue:56:15
54 |              <tr
55 |                :item-index="itemIndex"
56 |                :key="itemIndex"
   |                ^^^^^^^^^^^^^^^^
57 |                :class="onRowClass(item, itemIndex)"
58 |                @click="onRowClicked(item, itemIndex, $event)"
 @ ./node_modules/vuetable-3/src/components/Vuetable.vue?vue&type=template&id=3ee642bc 1:0-172 1:0-172
 @ ./node_modules/vuetable-3/src/components/Vuetable.vue 1:0-69 8:68-74
 @ ./static-src/main.js 10:15-75

ERROR in ./node_modules/vuetable-3/src/components/VuetablePagination.vue?vue&type=template&id=acfbe714 (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./node_modules/vuetable-3/src/components/VuetablePagination.vue?vue&type=template&id=acfbe714)
Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):

VueCompilerError: <template v-for> key should be placed on the <template> tag.
at /home/deepdivedylan/node_modules/vuetable-3/src/components/VuetablePagination.vue:32:11
30 |          <a
31 |            @click="loadPage(i + firstPage)"
32 |            :key="i"
   |            ^^^^^^^^
33 |            :class="[
34 |              $_css.pageClass,
 @ ./node_modules/vuetable-3/src/components/VuetablePagination.vue?vue&type=template&id=acfbe714 1:0-182 1:0-182
 @ ./node_modules/vuetable-3/src/components/VuetablePagination.vue 1:0-79 8:68-74
 @ ./static-src/main.js 11:25-95

ERROR in ./node_modules/vuetable-3/src/components/VuetablePagination.vue?vue&type=template&id=acfbe714 (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./node_modules/vuetable-3/src/components/VuetablePagination.vue?vue&type=template&id=acfbe714)
Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):

VueCompilerError: <template v-for> key should be placed on the <template> tag.
at /home/deepdivedylan/node_modules/vuetable-3/src/components/VuetablePagination.vue:46:11
44 |          <a
45 |            @click="loadPage(windowStart + i + firstPage - 1)"
46 |            :key="i"
   |            ^^^^^^^^
47 |            :class="[
48 |              $_css.pageClass,
 @ ./node_modules/vuetable-3/src/components/VuetablePagination.vue?vue&type=template&id=acfbe714 1:0-182 1:0-182
 @ ./node_modules/vuetable-3/src/components/VuetablePagination.vue 1:0-79 8:68-74
 @ ./static-src/main.js 11:25-95

5 errors have detailed information that is not shown.