Comment résoudre l'erreur « Attribut inutile inattendu sur <template> » dans les tables BootstrapVue

Question

Cette question fait suite à la réponse StackOverflow fournie ici

Comment ajouter un exposant dans les en-têtes de colonnes de ce tableau BootstrapVue ?

Il s'agit du code original de la table BootstrapVue.

<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>

C'est la réponse pour ajouter un exposant aux en-têtes de colonne des tableaux BootstrapVue.

<b-table>
  <template #head(age)="data">
    {{ data.label }} <sup>1</sup>
  </template>
</b-table>

La réponse ci-dessus fonctionne bien pour le code d'origine. Cependant, la réponse ne fonctionne pas si le nom de la clé d'origine est (age) 之间有空格和 % 字符 (%age new). C'est le code lorsqu'il y a des espaces entre les noms de clés.

<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>

Ajoutez ce nouvel espace entre les noms de clés et la réponse correspondante deviendra

<b-table>
  <template #head(%age new)="data">
    {{ data.label }} <sup>1</sup>
  </template>
</b-table>

J'obtiens l'erreur suivante ;

error  Unexpected useless attribute on `<template>`  vue/no-useless-template-attributes
error  Unexpected useless attribute on `<template>`  vue/no-useless-template-attributes

Comment corriger cette erreur ?

J'utilise vue v2.6 et BootstrapVue.

Answer 1

Vous pouvez essayer d'utiliser des chaînes littérales

Ou remplacez simplement les espaces par des traits de soulignement, ou utilisez les clés de dénomination camelCase

Answer 2

Vue voit deux propriétés, #head(%age 和 new)="data" : elles sont analysées d'abord en tant qu'attributs HTML, puis toute signification syntaxique (parenthèses et crochets) de Vue ou Bootstrap-Vue. La documentation décrit ce comportement sous « Contraintes de syntaxe des paramètres dynamiques » (Documentation v2, Documentation v3), et en raison de la complexité des noms de propriété, il s'applique même si vos noms de propriété ne sont pas entièrement dynamiques :

Bien que les noms de propriétés soient assez vagues avec les caractères qu'ils acceptent , il n'y a aucun moyen d'échapper aux espaces, vous êtes donc coincé. Cela vous laisse deux options :

• Si vous pouvez définir une propriété calculée ou une valeur de données percentagePropertyName = "head(%age new)"，则可以使用语法 #[percentagePropertyName] dans votre composant (etc.).
• Changez le nom du champ en quelque chose sans caractères spéciaux, comme percentage_new。您可以轻松地将其映射到数据对象中，例如dataArray = dataArray.map(x => ({ Percentage_new: x["%age new"], ...x }));.