此問題是此處提供的 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。
uj5u.com熱心網友回復：
Vue 看到兩個屬性，#head(%age并且new)="data": 它們首先被決議為 HTML 屬性，而 Vue 或 Bootstrap-Vue（括號和括號）的任何語法含義都在后面。檔案在“Dynamic Argument Syntax Constraints”（v2 docs，v3 docs）下描述了這種行為，由于屬性名稱的復雜性，即使您的屬性名稱不是完全動態的，它也適用：
動態引數運算式有一些語法限制，因為某些字符（例如空格和引號）在 HTML 屬性名稱中是無效的。例如，以下內容無效：
<!-- This will trigger a compiler warning. --> <a v-bind:['foo' bar]="value"> ... </a>解決方法是使用不帶空格或引號的運算式，或者用計算屬性替換復雜運算式。
盡管屬性名稱在他們接受的字符中非常寬松，但沒有辦法逃避空格，所以你被卡住了。這使您有兩個選擇：
- 如果您可以在組件中定義計算屬性或資料值
percentagePropertyName = "head(%age new)"，則可以將其與語法#[percentagePropertyName]（等）一起使用。 - 將您的欄位名稱更改為不帶特殊字符的名稱，例如
percentage_new. 您可以輕松地將其映射到您的資料物件中，例如dataArray = dataArray.map(x => ({ percentage_new: x["%age new"], ...x }));.
uj5u.com熱心網友回復：
您可以嘗試使用字串文字
<b-table>
<template #head(`age new`)="data">
{{ data.label }} <sup>1</sup>
</template>
</b-table>
或者只是用下劃線替換空格，或者駱駝大寫鍵
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/444709.html
標籤：javascript Vue.js Vuejs2 引导程序
上一篇：QuillEditor不會在輸入欄位中顯示v-model(Vue3)
下一篇：未找到Nuxt注入