So beheben Sie den Fehler „Unerwartetes nutzloses Attribut auf <Vorlage>“ in BootstrapVue-Tabellen
Diese Frage ist eine Fortsetzung der hier bereitgestellten StackOverflow-Antwort
Wie füge ich hochgestellte Zeichen in den Spaltenüberschriften dieser BootstrapVue-Tabelle hinzu?
Dies ist der Originalcode für die BootstrapVue-Tabelle.
<script>
export default {
data() {
return {
// Note 'isActive' is left out and will not appear in the rendered table
fields: [
{
key: 'last_name',
sortable: true
},
{
key: 'first_name',
sortable: false
},
{
key: 'age',
label: 'Person age',
sortable: true,
// Variant applies to the whole 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>
Dies ist die Antwort, um den Spaltenüberschriften von BootstrapVue-Tabellen einen hochgestellten Index hinzuzufügen.
<b-table>
<template #head(age)="data">
{{ data.label }} <sup>1</sup>
</template>
</b-table>
Die obige Antwort funktioniert gut für den Originalcode. Die Antwort funktioniert jedoch nicht, wenn der ursprüngliche Schlüsselname (age) 之间有空格和 % 字符 (%age new) lautet. Dies ist der Code, wenn zwischen Schlüsselnamen Leerzeichen stehen.
<script>
export default {
data() {
return {
// Note 'isActive' is left out and will not appear in the rendered table
fields: [
{
key: 'last_name',
sortable: true
},
{
key: 'first_name',
sortable: false
},
{
key: '%age new', //space in between causes
label: 'Person age',
sortable: true,
// Variant applies to the whole 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>
Fügen Sie dieses neue Leerzeichen zwischen den Schlüsselnamen hinzu und die entsprechende Antwort wird zu
<b-table>
<template #head(%age new)="data">
{{ data.label }} <sup>1</sup>
</template>
</b-table>
Ich erhalte die folgende Fehlermeldung:
error Unexpected useless attribute on `<template>` vue/no-useless-template-attributes error Unexpected useless attribute on `<template>` vue/no-useless-template-attributes
Wie kann dieser Fehler behoben werden?
Ich verwende Vue v2.6 und BootstrapVue.
