Директива v-slot не поддерживает никаких модификаторов

Question

Я использую vuetify datatable, у нас есть разные слоты с некоторыми реквизитами, например, ниже

<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-slot не поддерживает никаких модификаторов

согласно этим документам это правильно https://eslint.vuejs.org/rules/valid-v-slot.html

но у него нет примера того, как мы справляемся с этим делом

как я могу удалить это предупреждение / или исправить это, не делая его исключением

Спасибо

Answer 1

Я не вижу ни одного v-slot в предоставленном вами коде, чтобы я мог показать вам только свой вариант использования.

С ошибкой Eslint:

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

Без ошибки:

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

Answer 2

В eslint-plugin-vue@^7.1.0, вы можете использовать allowModifiers вариант в vue/valid-v-slot правило.

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

vue / valid-v-slot # опции

Answer 3

Для меня следующая запись в settings.json устранила проблему:

 "vetur.validation.template": false

Answer 4

Я попробовал ответ Hexodus, но в моем случае шаблон вообще не отображался.

Я заставил его отлично работать с этим, без каких-либо изменений правил eslint:

      <template #[`item.actions`]="{ item }">

Answer 5

РЕДАКТИРОВАТЬ: как указано в комментариях и (правильный) ответ Hexodus, вы можете обойти предупреждение о линтинге, используя имена динамических слотов, которые возвращают строку (шаблон). "Не включать" больше не рекомендуется, так как теперь это стандартное правило. Таким образом, я рекомендую использовать метод Hexodus вместо полного отключения действующего правила v-слота.

---

Исходное сообщение:

Вы не можете исправить это предупреждение о линтинге.

• В синтаксисе Vue для модификаторов используется точка, чтобы изменить способ работы директивы (например, v-model.number)
• То, как Vuetify динамически именует свои слоты, использует точку для выбора определенной части компонента (#header.data-table-select).

ESLint не может различить, пытаетесь ли вы установить модификатор для слота (что невозможно), или у вас есть имя слота, содержащее точку.

Самое простое, что вы можете сделать, - это отключить правило. Поскольку правило 'valid-v-slot' не включено по умолчанию ни в одной из базовых конфигураций eslint-plugin-vue, вы сможете найти его в разделе "rules" вашей конфигурации eslint.

Answer 6

** попробуй это **

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

если используете формат vetur, добавьте опцию в настройках vscode

      "vetur.validation.template": false

Answer 7

Вы можете определить имя динамического слота следующим образом:

      <template #[`item.actions`]="{ item }">
// your code
</template>

Дополнительную информацию можно найти в официальной документации Vue:https://vuejs.org/guide/comComponents/slots.html#dynamic-slot-names .

Answer 8

У меня сработало:

в.vue

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

в.js

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

Answer 9

Возможно, это не ответ, и вы также можете не согласиться с моим решением, но это то, что я сделал.

ОТВЕТ: Я понизил Vetur до версии 0.23! Это сработало! (Ожидается выпуск новой версии, которая решает эту проблему.

Откройте боковую панель расширений на VSCode, щелкните правой кнопкой мыши Vetur и выберите install other versions.

В качестве альтернативы, если ваш код работает нормально, строка перед vue-eslint-plugin ошибка вы можете попробовать <!-- eslint-disable-next-line vue/no-v-html --> отключить eslint для следующей строки или <!-- eslint-disable --> чтобы отключить каждое отключение линтинга под ним.

Работал на некоторых людей, но не на меня, и может не работать на вас. В любом случае предпочтительнее перейти на более раннюю версию Vetur.

Я использую фреймворк laravel и vuetify. Предыдущие коды внезапно сообщали об ошибках eslint с красными линиями - директива vue/valid-v-slot, добавление нескольких корневых узлов в шаблон и т. Д., Без рекомендации какого-либо быстрого исправления, но все они работают нормально. Ответы, которые я получил в результате поиска, никогда не давали никаких результатов, пока я не понизил рейтинг, любое другое решение будет приветствоваться!

Answer 10

Для меня эта конфигурация, добавленная в package.json, работала

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