如何修复`<template>`表中的“意外无用属性”错误？

Question

这个问题是对这里提供的StackOverflow答案的后续。

如何在这个BootstrapVue表的列标题中有上标？

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

下面是向BootstrapVue表的列标题添加上标的答案。

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

上面的答案对于原始代码来说很好。但是，如果原始密钥名(age)之间有空格和%字符(%age new)，则答案无效。下面是键名之间有空格时的代码。

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

在键名之间加上这个新的空格，相应的答案将变成

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

我得到以下错误；

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

如何修复此错误？

我使用的是vue v2.6和BootstrapVue。

Answer 1

Vue看到两个属性，#head(%age和new)="data"：它们首先被解析为HTML，任何来自Vue或Bootstrap(括号和parens)的语法意义都会在后面出现。文档在“动态参数语法约束”(v2文档，v3文档)下描述了这种行为，这是由于属性名的复杂性而适用的，尽管属性名称并不完全是动态的：

动态参数表达式具有一些语法约束，因为某些字符(如空格和引号)在HTML属性名称中无效。例如，以下内容无效:解决方法要么使用没有空格或引号的表达式，要么用计算属性替换复杂表达式。

虽然属性名相当宽松。在他们接受的字符，没有办法转义空格，所以你被卡住了。这给您留下了两个选择：

• 如果可以在组件中定义计算的属性或数据值percentagePropertyName = "head(%age new)"，则可以将其与语法#[percentagePropertyName] (etc)一起使用。
• 将字段名更改为没有特殊字符的内容，如percentage_new。您可以很容易地将其映射到数据对象中，例如dataArray = dataArray.map(x => ({ percentage_new: x["%age new"], ...x }));。

Answer 2

您可以尝试使用字符串文本。

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

或者用下划线替换空格，或者camelCase键