web-dev-qa-db-ja.com

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."}}
vuetify.jsvue-tables-2
4
Code First

{ item }プロップ割り当てにv-slotではなくpropsを渡します。

これにより、header.value;を使用する必要がなくなります。大文字と小文字を区別せずに、キー名をそのまま入力します。 注：オブジェクトを渡す場合は、小文字に設定する必要があります。

以前（つまり、OP質問の例）：

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

後：

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