BootstrapVue テーブルの「<テンプレート> に予期しない無駄な属性があります」エラーを解決する方法

Question

この質問は、ここで提供されている StackOverflow の回答のフォローアップです

この BootstrapVue テーブルの列ヘッダーに上付き文字を追加するにはどうすればよいですか?

これは、BootstrapVue テーブルの元のコードです。

リーリー

これは、BootstrapVue テーブルの列ヘッダーに上付き文字を追加するための答えです。

リーリー

上記の答えは、元のコードでは正常に機能します。ただし、元のキー名 (age) と % 文字 (%age new) の間にスペースがある場合、答えは機能しません。キー名の間にスペースがある場合のコードです。

リーリー

キー名の間にこの新しいスペースを追加すると、対応する答えは

になります。 リーリー

次のエラーが表示されます;

リーリー

このエラーを修正するにはどうすればよいですか?

私は vue v2.6 と BootstrapVue を使用しています。

Answer 1

文字列リテラルを使用してみることができます

リーリー

または、スペースをアンダースコアに置き換えるか、キャメルケースの名前付けキーを使用します

Answer 2

Vue は、#head(%age および new)="data" という 2 つの属性を認識します。これらは、まず HTML 属性として解析され、次に Vue または Bootstrap から解析されます。構文の意味は問いません。 Vue の (括弧と括弧)。この動作については、ドキュメントの「動的パラメーター構文の制約」(v2 Documentation、v3 Documentation a>) で説明されています。プロパティ名が複雑であるため、プロパティ名が完全に動的ではない場合でも、次の場合にも機能します:

属性名は、受け入れられる文字 にかなり制限がありますが、スペースをエスケープする方法がないため、行き詰まってしまいます。これにより、2 つのオプションが残ります:

• コンポーネントで計算されたプロパティまたはデータ値を定義できる場合 percentagePropertyName = "head(%age new)" 構文 #[percentagePropertyName] (など) 。）。
• フィールド名を、percentage_new などの特殊文字を含まない名前に変更します。これを dataArray = dataArray.map(x => ({ Percentage_new: x["%age new"], ...x })); .## のようにデータ オブジェクトに簡単にマッピングできます。
#