この質問は、ここで提供されている StackOverflow の回答のフォローアップです
この BootstrapVue テーブルの列ヘッダーに上付き文字を追加するにはどうすればよいですか?
これは、BootstrapVue テーブルの元のコードです。
リーリーこれは、BootstrapVue テーブルの列ヘッダーに上付き文字を追加するための答えです。
リーリー上記の答えは、元のコードでは正常に機能します。ただし、元のキー名 (age) と % 文字 (%age new) の間にスペースがある場合、答えは機能しません。キー名の間にスペースがある場合のコードです。
キー名の間にこの新しいスペースを追加すると、対応する答えは
になります。 リーリー次のエラーが表示されます;
リーリーこのエラーを修正するにはどうすればよいですか?
私は vue v2.6 と BootstrapVue を使用しています。
P粉4045397322024-03-26 15:24:57
文字列リテラルを使用してみることができます
リーリーまたは、スペースをアンダースコアに置き換えるか、キャメルケースの名前付けキーを使用します
P粉3099896732024-03-26 00:27:15
Vue は、#head(%age および new)="data" という 2 つの属性を認識します。これらは、まず HTML 属性として解析され、次に Vue または Bootstrap から解析されます。構文の意味は問いません。 Vue の (括弧と括弧)。この動作については、ドキュメントの「動的パラメーター構文の制約」(v2 Documentation、v3 Documentation) で説明されています。プロパティ名が複雑であるため、プロパティ名が完全に動的ではない場合でも、次の場合にも機能します:
属性名は、受け入れられる文字 にかなり制限がありますが、スペースをエスケープする方法がないため、行き詰まってしまいます。これにより、2 つのオプションが残ります:
percentagePropertyName = "head(%age new)" 構文 #[percentagePropertyName] (など) 。）。 percentage_new などの特殊文字を含まない名前に変更します。これを dataArray = dataArray.map(x => ({ Percentage_new: x["%age new"], ...x })); .## のようにデータ オブジェクトに簡単にマッピングできます。