La directiva ‘v-slot’ no admite ningún modificador

5 minutos de lectura

avatar de usuario
Dhiraj Wakchaure

Estoy usando la tabla de datos de vuetify, tengo diferentes ranuras con algunos accesorios, por ejemplo a continuación

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

También estoy usando el complemento eslint de vue para verificar si hay errores/código incorrecto/o cualquier violación, pero si uso el fragmento de código anterior en mi archivo, me da un error

La directiva ‘v-slot’ no admite ningún modificador

según este documento es correcto https://eslint.vuejs.org/rules/valid-v-slot.html

pero no tiene ningún ejemplo de cómo manejamos este caso

¿Cómo puedo eliminar esta advertencia o hacerla de la manera correcta, sin convertirla en una exención?

Gracias

avatar de usuario
Hexodo

no veo ninguno v-slot en el código que proporcionó para que pueda mostrarle solo mi caso de uso.

Con error Eslint:

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

Sin error:

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

  • A mi formateador de código no le gusta esta solución, lo está convirtiendo a esto <template v-slot:[&#x60;item.actions&#x60;]="{ item }"> ¿algunas ideas?

    – Diego García

    13 de agosto de 2020 a las 6:34

  • @Hexodus, el ‘#’ es un atajo de Vue para ‘v-slot:’

    – Lubo Antonov

    3 de septiembre de 2020 a las 19:43

  • para cualquiera que estuviera buscando la notación abreviada en los documentos como yo: vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthhand

    – J. Unkrass

    4 de septiembre de 2020 a las 8:49

  • @DiegoGarcia, probablemente esté usando Vetur, puede cambiar el formateador html de vetur desde su configuración. Cámbielo de prettyhtml a más bonito.

    – Mehmet Can Kamar

    16 sep 2020 a las 19:41

  • ¡No sabía que podías hacer esto! Tenemos estas advertencias en varias páginas y esto hace que mi TOC sea un poco más feliz.

    – cazador de polvo

    9 dic 2020 a las 17:07

avatar de usuario
nokazn

En [email protected]^7.1.0puedes usar allowModifiers opción en vue/valid-v-slot regla.

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

vue/valid-v-ranura #opciones

  • O si tiene un archivo con formato javascript (.eslintrc.js) como yo, puede agregar: rules: { ‘vue/valid-v-slot’: [ ‘error’, { allowModifiers: true, }, ]},

    – Jasón

    2 de noviembre de 2020 a las 21:54


  • Esto no parece funcionar con mi configuración, nuxtjs, vscode…

    – Ben bobinado

    30 de noviembre de 2020 a las 2:12

  • Parece que cuando Vetur está instalado, la regla no se puede deshabilitar en .eslintrc. Parece que la respuesta de Daniel Schmidt es la solución.

    – Hendrik Jan

    5 de octubre de 2021 a las 8:03


Para mí, la siguiente entrada en settings.json solucionó el problema:

 "vetur.validation.template": false

  • Esto también funcionó para mí. Aparentemente, este error se origina en Vetur cuyo incorporado eslint-plugin-vue no hace referencia a un proyecto .eslintrc . (tomado de gitmemory.com/issue/vuejs/eslint-plugin-vue/1269/668921391)

    – RTF

    12 de enero de 2021 a las 15:15


  • Agregar esta línea a .vscode/settings.json en la raíz de mi proyecto no funcionó. Para que esto funcione, tuve que ir a Archivo –> Preferencias –> Extensiones, seleccionar la extensión Vetur, hacer clic en su configuración, desplazarme hacia abajo para encontrar “Editar en configuración.json” y agregar la línea al final de ese archivo Ese es un archivo diferente por alguna razón, así que funcionó cuando lo agregué allí.

    – alfreema

    31 oct 2021 a las 14:46

  • ¿Estás seguro de que hacerlo no deshabilitará nada más aparte de eso?

    – Ahmad

    7 de mayo a las 15:22

avatar de usuario
Excalibaard

EDITAR: Como lo notifican los comentarios y la respuesta (correcta) de Hexodus, puede evitar la advertencia de pelusa utilizando nombres de ranura dinámicos que devuelven una cadena (plantilla). Ya no se recomienda ‘no habilitar’, ya que ahora es una regla estándar. Por lo tanto, recomiendo usar el método de Hexodus en lugar de deshabilitar la regla de ranura en V válida por completo.


Publicación original:

Realmente no puedes arreglar esta advertencia de pelusa.

  • La sintaxis de Vue para los modificadores usa el punto para alterar la forma en que funciona una directiva (por ejemplo, v-model.number)
  • La forma en que Vuetify nombra dinámicamente sus espacios utiliza un punto para seleccionar una parte específica del componente (#header.data-table-select).

ESLint no puede distinguir si está intentando establecer un modificador en una ranura (lo cual es imposible) o si tiene un nombre de ranura que contiene un punto.

Lo más fácil que puede hacer es deshabilitar la regla. Dado que la regla ‘valid-v-slot’ no está habilitada de forma predeterminada por ninguna de las configuraciones básicas de eslint-plugin-vue, debería poder encontrarla en “reglas” en su configuración de eslint.

Intenté la respuesta de Hexodus, pero la plantilla no se mostraba en absoluto en mi caso.

Conseguí que funcionara perfectamente con esto, sin ninguna modificación de la regla de eslint:

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

avatar de usuario
Fuego

Prueba esto:

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

si usas el formato Veturagregue esta opción en la configuración de vscode:

"vetur.validation.template": false

avatar de usuario
DAVID AJAYÍ

Tal vez esta no sea la respuesta, y es posible que tampoco acepte mi solución, pero esto es lo que hice.

ANS: ¡Bajé Vetur a la versión 0.23! ¡Funcionó! (Esperando el lanzamiento de una nueva versión que aborde el problema.

Abra el panel lateral Extensiones en VSCode, haga clic derecho en Vetur y seleccione install other versions.

Alternativamente, si su código funciona bien, una línea antes del vue-eslint-plugin error que puedes intentar <!-- eslint-disable-next-line vue/no-v-html --> para deshabilitar eslint para la siguiente línea o <!-- eslint-disable --> para deshabilitar cada deshabilitar pelusa debajo de él.

Funcionó para algunas personas, pero no para mí y puede que no funcione para usted. De cualquier manera, prefiera la degradación de Vetur

Estoy usando laravel framework y vuetify. Los códigos anteriores informaron repentinamente errores de eslint con líneas rojas: directiva vue/valid-v-slot, agregando múltiples nodos raíz a la plantilla, y así sucesivamente sin recomendar ninguna solución rápida, pero todos funcionan bien. Las respuestas que obtuve de la búsqueda nunca arrojaron ningún resultado hasta que bajé de categoría, ¡cualquier otra solución será muy bienvenida!

  • <!-- eslint-disable-next-line --> es lo que hizo por mí.

    – shaneparsons

    5 de mayo de 2021 a las 13:59


  • No puedo creer que volví buscando mi propia respuesta.

    – DAVID AJAYÍ

    3 de junio de 2021 a las 8:34

¿Ha sido útil esta solución?