This inquiry is related to the answer on StackOverflow that can be found here
How can I incorporate superscript in the column header of a BootstrapVue table?
Below is the unaltered code snippet for the BootstrapVue table.
<script>
export default {
data() {
return {
// Note 'isActive' has been omitted and will not be displayed in the rendered table
fields: [
{
key: 'last_name',
sortable: true
},
{
key: 'first_name',
sortable: false
},
{
key: 'age',
label: 'Person age',
sortable: true,
// The variant attribute applies to the entire column, including the header and footer
variant: 'danger'
}
],
items: [
{ isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
{ isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
{ isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
]
}
}
}
</script>
Here's the solution to add superscript to the column header of the BootstrapVue table.
<b-table>
<template #head(age)="data">
{{ data.label }} <sup>1</sup>
</template>
</b-table>
The aforementioned solution works perfectly with the original code. However, it encounters an issue if the original key name (age) contains a space and the % character between characters (%age new). Below is the modified code when there is a space within the key name.
<script>
export default {
data() {
return {
// Note 'isActive' has been omitted and will not be displayed in the rendered table
fields: [
{
key: 'last_name',
sortable: true
},
{
key: 'first_name',
sortable: false
},
{
key: '%age new', // A space in the key causes
label: 'Person age',
sortable: true,
// The variant attribute applies to the entire column, including the header and footer
variant: 'danger'
}
],
items: [
{ isActive: true, '%age new': 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ isActive: false, '%age new': 21, first_name: 'Larsen', last_name: 'Shaw' },
{ isActive: false, '%age new': 89, first_name: 'Geneva', last_name: 'Wilson' },
{ isActive: true, '%age new': 38, first_name: 'Jami', last_name: 'Carney' }
]
}
}
}
</script>
With this alteration in the key name, the respective solution would be as follows.
<b-table>
<template #head(%age new)="data">
{{ data.label }} <sup>1</sup>
</template>
</b-table>
An error message displays:
error Unexpected useless attribute on `<template>` vue/no-useless-template-attributes
error Unexpected useless attribute on `<template>` vue/no-useless-template-attributes
What steps can be taken to rectify this error?
I am utilizing Vue v2.6 and BootstrapVue.