既にこの内容は他の方が取り上げられていますが、このエラーで数時間足踏みしてしまったので、自分の備忘録も兼ねて残しておきます。
実現したかった内容
Firebaseから取得したデータを表形式で表示し、表の各項目をテキストボックスとすることによって、データ編集が可能な画面を作ろうとしていました。
環境
- Windows 11
- Vue.js 2.7.14
- Vuetify 2.5.5
最初に書いたコード
vue
<v-data-table
:headers="headers"
:items="dataList">
<template v-slot:item.dataNo="{ item }">
<v-text-field v-model="item.dataNo" />
</template>
（省略）
</v-data-table>
他の記事を参考にしながら最初に実装したのがこちらになりますが、v-slotの記述部分にエラーが出て実行できませんでした。
エラー文
Expected '#item' instead of 'v-slot:item'.
'v-slot' directive doesn't support any modifier.
その後、ネットの記事を見漁って他の記述方法などを試して、上記とは違うエラーが出て混乱し、また別の書き方を探す...というループに嵌ってしまいました。
結局以下のようにESLintを無効にするよう記述することで一応は解決し、ようやくエラーが消えて安堵していました。
vue
<!-- eslint-disable-next-line -->
<template v-slot:item.dataNo="{ item }">
<v-text-field v-model="item.dataNo" />
</template>
しかし、後になってエラーの内容を見てみると、ESLintは別の書き方を推奨しているということだったので調べてみました。
推奨の書き方
こういった書き方がESLint的には望ましいようです。
vue
<template #[`item.dataNo`]="{ item }">
<v-text-field v-model="item.dataNo" />
</template>
(参考にしたstackoverflow)
https://stackoverflow.com/questions/61344980/v-slot-directive-doesnt-support-any-modifier