7

I got an issue with Eslint using modifiers in v-slot

I've try to follow the answer by nokazn in this question : 'v-slot' directive doesn't support any modifier And the documentation of lint for vuejs https://eslint.vuejs.org/rules/valid-v-slot.html

I add in my .eslintrc.js file :

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

But i got the following error in the validation of the lint file :

Configuration for rule "vue/valid-v-slot" is invalid:
    Value [{"allowModifiers":true}] should NOT have more than 0 items.

What I try to get accepted by lint is the following code :

<v-data-table
        :headers="headers"
        :items="data"
        disable-pagination
        fixed-header
      >
        <template v-slot:item.EDIT>
          <v-btn icon>
            <v-icon>mdi-pencil</v-icon>
          </v-btn>
        </template>
      </v-data-table>

(note that this code is working beside the lint error)

CharybdeBE
  • 1,791
  • 1
  • 20
  • 35
  • Are you using the latest ESLint plugin? `allowModifiers` was added in 7.1.0. https://github.com/vuejs/eslint-plugin-vue/releases/tag/v7.1.0 – skirtle Nov 16 '20 at 15:49
  • Yes i do, from my package.json : "eslint": "^7.13.0", "eslint-config-airbnb-base": "^14.2.1", "eslint-plugin-import": "^2.22.1", "eslint-plugin-vue": "^7.1.0", – CharybdeBE Nov 16 '20 at 16:15
  • Does this answer your question? ['v-slot' directive doesn't support any modifier](https://stackoverflow.com/questions/61344980/v-slot-directive-doesnt-support-any-modifier) – Raeisi Nov 16 '20 at 19:13
  • No it does not sorry, my question is how to write that esLint line, not how to rewrite my code – CharybdeBE Nov 16 '20 at 19:55

1 Answers1

8

Same issue here: use "vue/valid-v-slot": "off" work for me!

<template  v-slot:[`item.monto`]='{ item }'>
          ${{ formatCLP(item.monto) }}
        </template>
Visaka Devi
  • 81
  • 3