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

How to have superscript in column header of this BootstrapVue table?

Here's 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>

Here's the answer to add superscript to column header of BootstrapVue table.

<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 the original key name (age) has a space and % character in between (%age new). Here's the code when the name of the key has a space in between.

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

With this new space in between the key name, the corresponding answer becomes

<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 am using vue v2.6 and BootstrapVue.

CodePudding user response：

Vue sees two attributes, #head(%age and new)="data": They are parsed as HTML attributes first and foremost, and any syntactic meaning from Vue or Bootstrap-Vue (brackets and parens) comes later. The docs describe this behavior under "Dynamic Argument Syntax Constraints" (v2 docs, v3 docs), which applies due to the complexity of the attribute name even though your property name isn't exactly dynamic:

Dynamic argument expressions have some syntax constraints because certain characters, such as spaces and quotes, are invalid inside HTML attribute names. For example, the following is invalid:

<!-- This will trigger a compiler warning. -->
<a v-bind:['foo'   bar]="value"> ... </a>

The workaround is to either use expressions without spaces or quotes, or replace the complex expression with a computed property.

Though attribute names are quite lenient in the characters they accept, there's no way of escaping spaces, so you're stuck. This leaves you with the following options:

• If you can define a computed property or data value percentagePropertyName = "head(%age new)" in your component, you could use that with the syntax #[percentagePropertyName] (etc).
• Change your field name to something without a special character, such as percentage_new. You can easily map this in your data objects, e.g. dataArray = dataArray.map(x => { percentage_new: x["%age new"], ...x });.

CodePudding user response：

You could try using a string literals

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

Or just replace the space with an underscore, or camelCase the key