So beheben Sie den Fehler „Unerwartetes nutzloses Attribut auf <Vorlage>“ in BootstrapVue-Tabellen

Question

Diese Frage ist eine Fortsetzung der hier bereitgestellten StackOverflow-Antwort

Wie füge ich hochgestellte Zeichen in den Spaltenüberschriften dieser BootstrapVue-Tabelle hinzu?

Dies ist der Originalcode für die BootstrapVue-Tabelle.

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

Dies ist die Antwort, um den Spaltenüberschriften von BootstrapVue-Tabellen einen hochgestellten Index hinzuzufügen.

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

Die obige Antwort funktioniert gut für den Originalcode. Die Antwort funktioniert jedoch nicht, wenn der ursprüngliche Schlüsselname (age) 之间有空格和 % 字符 (%age new) lautet. Dies ist der Code, wenn zwischen Schlüsselnamen Leerzeichen stehen.

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

Fügen Sie dieses neue Leerzeichen zwischen den Schlüsselnamen hinzu und die entsprechende Antwort wird zu

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

Ich erhalte die folgende Fehlermeldung:

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

Wie kann dieser Fehler behoben werden?

Ich verwende Vue v2.6 und 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 }));.