[解決済み] Vuetifyのデータテーブルで、スロットテンプレートを持つテーブル列

質問

Vuetifyのデータテーブルで、スロットテンプレートを持つテーブルカラムのために、キャメルケースのカラム名を使用することは可能ですか？現在、カラム名のみをサポートしており、モデルには小文字で、例えば

これはうまくいきません。

   <template v-slot:item.firstName="{item}">
       <span>{{item.prefix}} {{item.firstName}} {{item.lastName}} </span>
   </template>

これは動作します。

   <template v-slot:item.firstname="{item}">
       <span>{{item.prefix}} {{item.firstname}} {{item.lastname}} </span>
   </template>

私のデータモデルには、このようなプロパティがあります。

contactsList: {
  {lastName : "Ray",
  firstName : "Sam",
   prefix : "Dr."},
  {lastName : "Bank",
   firstName : "Paul",
   prefix : "Jr."}}

解決方法は？

ちょっと遊んでみたのですが、正確な原因は分かりませんが、ヘッダーが関係しているようです。ヘッダーを小文字で配置する限り、この問題は発生しません。スロット内のすべての文字を大文字にすることもできます。

HTMLです。

    <div id="app">
      <v-app id="inspire">
        <div>
          <v-data-table
            :headers="headers"
            :items="items"
          >
          
          <template v-slot:item.firstNaMe="{item}">
              <span>test1</span>
          </template>
            
          <template v-slot:item.Lastname="{item}">
              <span>test2</span>
          </template>
            
          </v-data-table>
        </div>
      </v-app>
    </div>

JSです。

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data () {
        return {
          items: [
            {firstName: 'John', Lastname: 'Doe' },
            {firstName: 'Jane', Lastname: 'Doe' }
          ],
          headers: [
            { text: 'first name', value: 'firstname' },
            { text: 'last name', value: 'lastname' }
          ],
        }
      },
    })

コードペン https://codepen.io/reijnemans/pen/oNvQKje?editors=1010