Bagaimana untuk menyelesaikan ralat "Atribut tidak berguna yang tidak dijangka pada <template>" dalam jadual BootstrapVue

Question

Soalan ini adalah susulan kepada jawapan StackOverflow yang disediakan di sini

Bagaimana untuk menambah superskrip dalam pengepala lajur jadual BootstrapVue ini?

Ini ialah kod asal untuk jadual 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>

Ini ialah jawapan untuk menambah superskrip pada pengepala lajur jadual BootstrapVue.

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

Jawapan di atas berfungsi dengan baik untuk kod asal. Walau bagaimanapun, jawapannya tidak berfungsi jika nama kunci asal ialah (age) 之间有空格和 % 字符 (%age new). Ini adalah kod apabila terdapat ruang antara nama kunci.

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

Tambah ruang baharu ini antara nama kunci dan jawapan yang sepadan akan menjadi

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

Saya mendapat ralat berikut;

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

Bagaimana untuk membetulkan ralat ini?

Saya menggunakan vue v2.6 dan BootstrapVue.

Answer 1

Anda boleh cuba menggunakan literal rentetan

Atau cuma gantikan ruang dengan garis bawah, atau gunakan kekunci penamaan camelCase

Answer 2

Vue melihat dua sifat, #head(%age 和 new)="data": ia dihuraikan dahulu sebagai atribut HTML, dan kemudian sebarang makna sintaks (tanda kurung dan kurungan) daripada Vue atau Bootstrap-Vue. Dokumentasi menerangkan tingkah laku ini di bawah "Kekangan Sintaks Parameter Dinamik" (v2 Documentation, v3 Documentation a>), dan disebabkan oleh kerumitan nama harta benda, ia terpakai walaupun nama harta benda anda tidak dinamik sepenuhnya:

Walaupun nama hartanah agak longgar dengan watak yang mereka terima , tiada cara untuk melarikan diri, jadi anda terperangkap. Ini memberi anda dua pilihan:

• Jika anda boleh menentukan sifat yang dikira atau nilai data percentagePropertyName = "head(%age new)"，则可以使用语法 #[percentagePropertyName] dalam komponen anda (dsb.).
• Tukar nama medan kepada sesuatu tanpa aksara khas, seperti percentage_new。您可以轻松地将其映射到数据对象中，例如dataArray = dataArray.map(x => ({ Percentage_new: x["%age new"], ...x }));.