解决BootstrapVue表格中的“<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

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

或者只是用下划线替换空格，或者用驼峰式命名键

Answer 2

Vue 看到两个属性，#head(%age 和 new)="data"：它们首先被解析为 HTML 属性，然后是来自 Vue 或 Bootstrap-Vue 的任何语法含义（括号和括号） 。文档在“动态参数语法约束”下描述了此行为（v2 文档、v3 文档)，由于属性名称的复杂性，即使您的属性名称不完全是动态的，它也适用：

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

• 如果您可以在组件中定义计算属性或数据值 percentagePropertyName = "head(%age new)"，则可以使用语法 #[percentagePropertyName] （等）。
• 将字段名称更改为不带特殊字符的名称，例如 percentage_new。您可以轻松地将其映射到数据对象中，例如dataArray = dataArray.map(x => ({ Percentage_new: x["%age new"], ...x }));.