解決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 文件 a>)，由於屬性名稱的複雜性，即使您的屬性名稱不完全是動態的，它也適用：

雖然屬性名稱相當他們接受的字元寬鬆，沒有辦法逃脫空格，所以你被困住了。這給您留下了兩個選擇：

• 如果您可以在元件中定義計算屬性或資料值 percentagePropertyName = "head(%age new)"，則可以使用語法 #[percentagePropertyName] （等等）。
• 將欄位名稱變更為不含特殊字元的名稱，例如 percentage_new。您可以輕鬆地將其對應到資料物件中，例如dataArray = dataArray.map(x => ({ Percentage_new: x["%age new"], ...x })); .