J'utilise la datatable de vuetify, dans ce cas, nous avons différents emplacements avec des accessoires par exemple ci-dessous
<template #header.data-table-select="{ on, props }">
<v-simple-checkbox color="purple" v-bind="props" v-on="on"></v-simple-checkbox>
</template>
J'utilise également le plugin eslint de vue pour vérifier les erreurs / mauvais code / ou toute violation, mais si j'utilise l'extrait de code ci-dessus dans mon fichier, cela me donne une erreur
La directive 'v-slot' ne prend en charge aucun modificateur
selon cette documentation, il est juste https://eslint.vuejs.org/rules/valid-v-slot.html
mais il n'a aucun exemple de la façon dont nous traitons ce cas
comment puis-je supprimer cet avertissement / ou le rendre correct, sans en faire une exemption
Merci
7 Réponses :
EDIT: Comme indiqué par les commentaires et la réponse (correcte) d'Hexodus, vous pouvez contourner l'avertissement de peluchage en utilisant des noms d'emplacement dynamiques qui renvoient une chaîne (modèle). «Ne pas activer» n'est plus recommandé, car il s'agit désormais d'une règle standard. Par conséquent, je recommande d'utiliser la méthode Hexodus plutôt que de désactiver complètement la règle de v-slot valide.
Message original:
Vous ne pouvez pas vraiment réparer cet avertissement pelucheux.
ESLint ne peut pas distinguer si vous essayez de définir un modificateur sur un emplacement (ce qui est impossible), ou si vous avez un nom d'emplacement qui contient un point.
La chose la plus simple à faire est de désactiver la règle. Puisque la règle 'valid-v-slot' n'est activée par défaut par aucune des configurations de base de eslint-plugin-vue, vous devriez pouvoir la trouver sous "rules" dans votre configuration eslint.
Je ne suis pas d'accord. Comme le montre la réponse de @Hexodus, ce problème peut être résolu.
On dirait que cela est maintenant activé par défaut FYI
Je ne vois pas de v-slot dans le code que vous avez fourni, donc je ne peux vous montrer que mon cas d'utilisation.
Avec l'erreur Eslint:
<template v-slot:[`item.actions`]="{ item }">
Sans erreur:
<template v-slot:item.actions="{ item }">
Mon formateur de code n'aime pas cette solution de contournement, il la convertit en <template v-slot:[`item.actions`]="{ item }"> des idées?
@DiegoGarcia Backtiks est livré avec ECMAScript 6, donc vous utilisez probablement ES5. Vous pouvez mettre à jour votre pile pour pouvoir gérer ES6 ou essayer les guillemets simples.
@Hexodus J'utilise ES6 et le même problème que DiegoGarcia
@ChrisHerbst Eh bien, il semble y avoir une différence entre nos outils ou nos piles. J'utilise vscode et la dernière vue 2.x avec 3.x Cli d'ailleurs.
@DiegoGarcia ajouter "parser": "vue" à votre .prettierrc fichier ou --parser vue à votre commande
@Hexodus, le '#' est un raccourci Vue pour 'v-slot:'
pour tous ceux qui recherchaient la notation abrégée dans la documentation comme moi: vuejs.org/v2/guide/components-slots.html#Named-Slots-Shortha nd
@DiegoGarcia vous utilisez probablement Vetur, vous pouvez changer le formateur html vetur à partir de ses paramètres. Changez-le de prettyhtml en plus joli.
Pour moi, j'ai travaillé uniquement avec des éléments sans accolades: <template v-slot:[ footer.page-text ]="item"> {{ item.pageStart }} - {{ item.pageStop }} {{ $t("dataTable.of") }} {{ item.itemsLength }} </template>
v-slot: item.name = "props" Et cela? j'ai la même erreur avec ça
fonctionne parfaitement
Ce n'est peut-être pas la réponse, et vous ne pouvez pas non plus acheter ma solution, mais c'est ce que j'ai fait.
ANS: J'ai rétrogradé Vetur à la version 0.23! Ça a marché! (En attente d'une nouvelle version qui résout le problème.
Ouvrez le panneau latéral Extensions sur VSCode, cliquez avec le bouton droit sur Vetur et sélectionnez install other versions .
Alternativement, si votre code fonctionne vue-eslint-plugin , une ligne avant l'erreur vue-eslint-plugin , vous pouvez essayer <!-- eslint-disable-next-line vue/no-v-html --> pour désactiver eslint pour la ligne suivante ou <!-- eslint-disable --> pour désactiver chaque désactivation du peluchage en dessous.
A travaillé pour certaines personnes mais pas pour moi et peut ne pas fonctionner pour vous. Dans tous les cas, préférez le déclassement de Vetur
J'utilise le framework laravel et vuetify. Les codes précédents signalaient soudainement des erreurs eslint avec des lignes rouges - directive vue / valid-v-slot, ajout de plusieurs nœuds racine au modèle, et ainsi de suite sans recommander de solution rapide, mais ils fonctionnent tous très bien. Les réponses que j'ai obtenues de la recherche n'ont jamais donné de résultat jusqu'à ce que je rétrograde, toute autre solution sera la bienvenue!
Cela a fonctionné pour moi:
en .vue
methods: {
getitemcontrols() {
return `item.controls`;
},
en .js
<template v-slot:[getitemcontrols()]="props">
vous devez utiliser computed dans ce cas. Ce serait une bonne solution lorsqu'il s'agit de valeurs imbriquées profondément (par exemple, item.controls.user.devReports.ReportBug )
Pour moi, l'entrée suivante dans settings.json a résolu le problème:
"vetur.validation.template": false
Dans eslint-plugin-vue@^7.1.0 , vous pouvez utiliser l'option allowModifiers dans la allowModifiers vue/valid-v-slot .
// .eslintrc.js
'vue/valid-v-slot': ['error', {
allowModifiers: true,
}],
Ou si vous avez un fichier au format javascript (.eslintrc.js) comme moi, vous pouvez ajouter: rules: {'vue / valid-v-slot': ['error', {allowModifiers: true,},],},
Cela ne semble pas fonctionner avec ma configuration, nuxtjs, vscode ...
Cette configuration fonctionne avec WebStorm . +1
Pour moi, cette configuration ajoutée à package.json a fonctionné
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/base"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
}