How to resolve "Unexpected useless attribute on <template>" error in BootstrapVue tables

Question

This question is a follow-up to the StackOverflow answer provided here

How do I add superscripts to the column headers of this BootstrapVue table?

This is the original code of the BootstrapVue table.

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

This is the answer for adding superscripts to column headers of BootstrapVue tables.

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

The answer above works fine for the original code. However, the answer does not work if there are spaces between the original key name (age) and the % character (%age new). This is the code when there are spaces between key names.

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

Add this new space between key names and the corresponding answer will become

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

I get the following error;

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

How to fix this error?

I'm using vue v2.6 and BootstrapVue.

Answer 1

You can try using string literals

Or just replace spaces with underscores, or use camelCase naming keys

Answer 2

Vue sees two attributes, #head(%age and new)="data": they are first parsed as HTML attributes, then from Vue or Bootstrap- Any syntax meaning of Vue (parentheses and brackets). The documentation describes this behavior under "Dynamic Parameter Syntax Constraints" (v2 Documentation, v3 Documentation a>), even if your property names are not fully dynamic due to the complexity of property names , it also works for:

Although attribute names are quite loose with the characters they accept , there is no way to escape the spaces, so you are stuck. This leaves you with two options:

• If you can define a computed property or data value in a component percentagePropertyName = "head(%age new)", you can use the syntax #[percentagePropertyName] (etc.).
• Change the field name to a name without special characters, such as percentage_new. You can easily map this into a data object like dataArray = dataArray.map(x => ({ Percentage_new: x["%age new"], ...x })); .