'v-slot' directive doesn't support any modifier 및 오류가 발생했을 때의 조치.

Nuxt를 사용하고 있다면 프로젝트를 시작할 때 ESLint라는 Linting 도구를 넣을 수 있습니다.
v-slot로 쓸 때 부분에 아래와 같은 에러가 나왔다.

'v-slot' directive doesn't support any modifier

실제로 실행하고 싶었던 코드는 이것 ↓.

Vue.js

<template>
  <v-data-table dense :headers="headers" :items="items" class="elevation-1">
    <template v-slot:item.actions="{ item }">
      <v-btn @click="deleteRow(item)">delete</v-btn>
    </template>
  </v-data-table>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import axios from 'axios'

@Component({})
export default class AxiosPractice extends Vue {
  items: any[] = []

  headers = [
    { text: 'id', value: 'id' },
    { text: 'name', value: 'name' },
    { text: 'email', value: 'email' },
    {
      text: 'Actions',
      value: 'actions',
      sortable: false,
    },
  ]
  deleteRow(item: any) {
    let index = this.items.findIndex((it) => it.email === item.email)
    this.items.splice(index, 1)
  }

  async mounted() {
    const response = await axios.get(
      'https://jsonplaceholder.typicode.com/posts/1/comments'
    )
    this.items = response.data.map((comment: any) => ({
      id: comment.id,
      email: comment.email,
      name: comment.name,
    }))
  }
}
</script>

코드의 아웃풋으로서는 이런 것을 생각하고 있었다.


조사해 보면 아무래도 ESLint에서는 v-slot이라는 쓰는 방법은 법도다.

이것은 ESLint적으로 ×Vue.js
<template v-slot:item.actions="{ item }">
이것이라면 OVue.js
<template v-slot:[`item.actions`]="{ item }">

v-slot 부분을 다시 써서 무사히 실행할 수 있었습니다.
Linting 툴은 필요하니까, 주위에 흘려 넣어 버렸지만,
확실히 망설였다.
여러분도 조심하세요.

(v-slot의 기술 방법은 h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 61344980 / vs ぉ t ぢ れ c ゔ 보다 인용)