'v-built' 지시어는 어떤 수식어도 지원하지 않는다.

'v-built' 지시어는 어떤 수식어도 지원하지 않는다.

나는 vuetify의 datable을 사용하고 있다. 나는 아래와 같은 소품들을 가진 다른 슬롯을 가지고 있다.

<template  #header.data-table-select="{ on, props }">
    <v-simple-checkbox color="purple" v-bind="props" v-on="on"></v-simple-checkbox>
</template>

나는 또한 오류/나쁜 코드/또는 위반을 확인하기 위해 vue의 eslint 플러그인을 사용하고 있지만, 만약 내가 내 파일에서 위의 코드 조각을 사용한다면 그것은 나에게 오류를 준다.

'v-built' 지시어는 어떤 수식어도 지원하지 않는다.

이 문서에 따르면 그것은 옳다. https://eslint.vuejs.org/rules/valid-v-slot.html

하지만 우리가 이 사건을 어떻게 처리했는지에 대한 어떠한 예도 가지고 있지 않다.

어떻게 면제를 하지 않고 이 경고를 제거할 수 있는가/또는 올바른 방법으로 만들 수 있는가?

고마워요.

아무 것도 안 보여…v-slot네가 제공한 암호로 내 사용 사례만 보여줄 수 있어

Eslint 오류 발생 시:

<template v-slot:item.actions="{ item }">

오류 없이:

<template v-slot:[`item.actions`]="{ item }">

인eslint-plugin-vue@^7.1.0, 사용할 수 있다.allowModifiers에 있어서의 선택권.vue/valid-v-slot통치를 하다

// .eslintrc.js
'vue/valid-v-slot': ['error', {
  allowModifiers: true,
}],

vue/valid-v-properties #message

나에게 settings.json의 다음 Entry가 문제를 해결했다.

 "vetur.validation.template": false

EDIT: 코멘트와 Hexododus' (정답) 답변으로 통지된 바와 같이, 문자열(템플릿)을 반환하는 동적 슬롯 이름을 사용하여 보풀링 경고를 처리할 수 있다.'Not enabled'는 이제 표준 규칙이기 때문에 더 이상 권장되지 않는다.따라서 유효한 v-slot 규칙을 모두 사용하지 않도록 설정하는 것보다 Hexododus의 방법을 사용하는 것이 좋다.

---

원본 게시물:

이 보풀 같은 경고는 정말 고칠 수 없다.

• 수식어에 대한 Vue 구문에서는 점을 사용하여 지시문이 작동하는 방식(예: v-model.number)을 변경한다.
• Vuetify가 슬롯의 이름을 동적으로 지정하는 방법은 구성 요소의 특정 부분을 선택하기 위해 점을 사용한다(#header.data-table 선택).

ESLint는 슬롯(불가능)에 수식어를 설정하려고 하는지, 아니면 점이 포함된 슬롯 이름을 가지고 있는지 구별할 수 없다.

당신이 할 수 있는 가장 쉬운 일은 규칙을 비활성화하는 것이다.'valid-v-slot' 규칙은 eslint-plugin-vue의 기본 구성에 의해 기본적으로 활성화되지 않으므로 eslint 구성의 "규칙"에서 찾을 수 있어야 한다.

다음을 시도해 보십시오.

<template v-slot:item.createdDate="{ item }">

vtur 형식을 사용하는 경우 vscode 설정에서 이 옵션을 추가하십시오.

"vetur.validation.template": false

어쩌면 이게 답이 아닐 수도 있고, 당신도 내 해결책을 믿지 않을 수도 있지만, 내가 한 일이 바로 이거야.

앤스: 나는 Vetur를 버전 0.23으로 다운그레이드했어!효과가 있었어! (이 문제를 해결하는 새로운 버전 릴리즈를 기다리는 중)

VSCode에서 Extensions 측면 패널을 열고 Vetur를 마우스 오른쪽 버튼으로 클릭하고install other versions.

또는 코드가 제대로 작동하고 있는 경우vue-eslint-plugin시도할 수 있는 오류<!-- eslint-disable-next-line vue/no-v-html -->다음 줄에 eslint를 사용하지 않도록 설정하거나<!-- eslint-disable -->모든 불능 보풀을 비활성화하기 위해서죠

몇몇 사람들을 위해 일했지만 나를 위해 일하지 않았고 당신을 위해 일하지 않을 수도 있다.어느 쪽이든, 베터 다운그레이드를 선호한다.

나는 애러벨 프레임워크를 사용하고 있다. 그리고 부시를 한다.이전 코드는 빨간색 선(vue/valid-v-slot 지시어, 템플릿에 여러 루트 노드를 추가하는 등)으로 eslint 오류를 갑자기 보고했지만 빠른 수정을 권장하지 않고 모두 정상 작동하고 있다.내가 검색에서 얻은 답변은 내가 다운그레이드하기 전까지 어떤 결과도 얻지 못했다. 다른 어떤 해결책도 매우 환영받을 것이다!

내게는 효과가 있었다.

.vue로

<template v-slot:[getitemcontrols()]="props">

.js로

 methods: {
    getitemcontrols() {
      return `item.controls`;
    },

나를 위해 이 구성이 패키지에 추가되었다.json이 일했다.

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/base"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

참조URL: https://stackoverflow.com/questions/61344980/v-slot-directive-doesnt-support-any-modifier