Vuetify.jsでVDataTable内部にNumber型のVTextFieldが強制的にblurされる

要するにinputフィールドで文字を入れた瞬間にフォーカスが外れて困った話。
比較的レアケースではあるが、困ったのでメモ。

まずはバージョン

モジュール	バージョン
vuetifyjs	0.14.8
vue.js	2.4.2

発生する前提条件

• VDataTable内でVTextFieldを利用している
• VTextFieldがtype=Numberになっている
• VTextFieldにv-modelないしはv-bindで値を設定している

発生する問題

VTextFieldに任意の値を入力した場合に強制的にblurされてしまいフォーカスが外れてしまう。

原因

VDataTable全体がリフレッシュされることで、VTextFieldも再Mountされてしまう模様。
(VTextField#mountedが呼ばれることを確認)

対策

#1293 Text field in data table loses focusに書いてある。

要するに、template部分をtrタグで囲って、キーを付与しろとのこと。
つまり、以下のbefore-afterで動くようになる。

before

<v-data-table slot="content" :headers="headers" selected-key="id" :items="dataItems" >
  <template slot="items" scope="props">
    <td>{{ props.item.name }}</td>
    <td>
      <v-text-field slot="content" required v-model="props.item.value" type="Number"/>
    </td>
  </template>
</v-data-table>

after

<v-data-table slot="content" :headers="headers" selected-key="id" :items="dataItems" >
  <template slot="items" scope="props">
    <!-- trタグでくくってkeyを付与する -->
    <tr :key="props.item.id">
      <td>{{ props.item.name }}</td>
      <td>
        <v-text-field slot="content" required v-model="props.item.value" type="Number"/>
      </td>
    </tr>
  </template>
</v-data-table>