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), 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 })); .