如何修复 BootstrapVue table 中的 "Unexpected useless attribute on `<template>`" 错误？

Question

此问题是对此处提供的 Whosebug 答案的 follow-up

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

这是在 BootstrapVue table 的第 header 列添加上标的答案 table。

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

上面的答案适用于原始代码。但是，如果原始键名 (age) 之间有 space 和 % 字符 (%age new)，则答案无效。这是当密钥名称之间有 space 时的代码。

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

在键名之间有了这个新的space，相应的答案就变成了

<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

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

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

或者只是将 space 替换为下划线，或者用驼峰命名的键

Answer 2

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

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:

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

虽然 attribute names are quite lenient 在他们接受的字符中，没有办法转义空格，所以你被卡住了。这给您留下了两个选择：

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

如何修复 BootstrapVue table 中的 "Unexpected useless attribute on `<template>`" 错误？

How to fix this "Unexpected useless attribute on `<template>`" error in BootstrapVue table?

javascript

vue.js

vuejs2

bootstrap-vue