Vue: Erreur lors de l'utilisation de plusieurs noms d'emplacements dynamiques (expression d'argument dynamique non valide)

Créé le 27 mars 2019 · 7Commentaires · Source: vuejs/vue

Version

2.6.10

Lien de reproduction

https://github.com/tbutcaru/v-issue-multiple-dynamic-slot-names

Étapes à suivre pour reproduire

Clonez ce dépôt: https://github.com/tbutcaru/v-issue-multiple-dynamic-slot-names
Courir: npm install
Courir: npm run serve

Qu'attend-on?

Plusieurs noms d'emplacements dynamiques doivent fonctionner comme prévu.

Que se passe-t-il réellement?

L'erreur suivante est générée:

Invalid dynamic argument expression: attribute names cannot contain spaces, quotes, <, >, / or =.#[headerslot]>Header slot</template>
    Default slot
    <template #[footerslot]

Si l'un des noms d'emplacements dynamiques est rendu statique (peu importe lequel), l'application fonctionne.

Mon enquête

fichier: node_modules/vue-template-compiler/build.js
ligne: 2563 (à l'intérieur de attrs.forEach(function (attr) { ) a ajouté l'avertissement suivant:

warn$1('--------------->> ' +  attr.name);

Résultats de l'enquête:

Dans le scénario de travail avec un seul nom d'emplacement dynamique: la valeur de ce nom d'emplacement dynamique est #[headerslot]
Dans le scénario d'erreur avec deux noms d'emplacement dynamiques: la valeur du premier nom d'emplacement dynamique est

#[headerslot]>Header slot</template>
    Default slot
    <template #[footerslot]

Donc, il semble que le compilateur ne sache pas comment extraire uniquement l'attribut lorsqu'il y a plusieurs noms d'emplacements dynamiques.

bug has PR

Source

tbutcaru

👍5

Commentaire le plus utile

Après de nombreux essais, j'ai trouvé un moyen de faire fonctionner plusieurs machines à sous dynamiques. Lorsque j'ajoute des clés à l'élément racine des modèles de créneaux dynamiques, cela tombe au travail:

cela ne fonctionne pas: reproduisez ici

   <template #[slot1]>
       <p>slot test</p>
   </template>
   <template #[slot2]>
       <p>slot test2</p>
    </template>

// got "Invalid dynamic argument expression: attribute names cannot contain spaces, quotes, <, >, / or ="

cette œuvre: reproduisez ici

   <template #[slot1]>
       <p key="1">slot test</p>
   </template>
   <template #[slot2]>
       <p key="2">slot test2</p>
    </template>

// work fine

Pourquoi ai-je besoin d'ajouter des clés pour que cela fonctionne? J'ai raté quelque chose.

davis90 le 22 janv. 2020

❤4

Tous les 7 commentaires

la reproduction

Justineo le 27 mars 2019

👍2

Le raccourci n'est disponible que lorsqu'un argument est fourni. Essayez d'utiliser:
<template v-slot:[dynamicSlotName]> ... </template>

michalzaq12 le 28 mars 2019

Le raccourci n'est disponible que lorsqu'un argument est fourni. Essayez d'utiliser:
<template v-slot:[dynamicSlotName]> ... </template>

J'ai essayé cela avant de créer le problème et le résultat est le même 😞

tbutcaru le 28 mars 2019

👀1

Salut à tous!

Quoi de neuf à ce sujet? J'ai toujours le problème dans 2.6.11 reproduire ici

davis90 le 22 janv. 2020

cela ne fonctionne pas: reproduisez ici

   <template #[slot1]>
       <p>slot test</p>
   </template>
   <template #[slot2]>
       <p>slot test2</p>
    </template>

// got "Invalid dynamic argument expression: attribute names cannot contain spaces, quotes, <, >, / or ="

cette œuvre: reproduisez ici

   <template #[slot1]>
       <p key="1">slot test</p>
   </template>
   <template #[slot2]>
       <p key="2">slot test2</p>
    </template>

// work fine

Pourquoi ai-je besoin d'ajouter des clés pour que cela fonctionne? J'ai raté quelque chose.

davis90 le 22 janv. 2020

❤4

La solution de @ davis90 a fonctionné pour moi. Je ne comprends pas pourquoi cela fonctionne aussi.