Vue: Error al usar varios nombres de ranuras dinámicas (expresión de argumento dinámico no válida)

Creado en 27 mar. 2019 · 7Comentarios · Fuente: vuejs/vue

Versión

2.6.10

Enlace de reproducción

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

pasos para reproducir

Clona este repositorio: https://github.com/tbutcaru/v-issue-multiple-dynamic-slot-names
Ejecutar: npm install
Ejecutar: npm run serve

¿Lo que es esperado?

Varios nombres de ranuras dinámicas deberían funcionar como se esperaba.

¿Qué está pasando realmente?

Se produce el siguiente error:

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

Si uno de los nombres de las ranuras dinámicas se hace estático (no importa cuál), la aplicación está funcionando.

Mi investigacion

archivo: node_modules/vue-template-compiler/build.js
line: 2563 (dentro de attrs.forEach(function (attr) { ) agregó la siguiente advertencia:

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

Resultados de la investigación:

En el escenario de trabajo con un solo nombre de ranura dinámica: el valor de ese nombre de ranura dinámica es #[headerslot]
En el escenario de error con dos nombres de ranura dinámicos: el valor del primer nombre de ranura dinámica es

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

Entonces, parece que el compilador no sabe cómo extraer solo el atributo cuando hay varios nombres de ranuras dinámicas.

bug has PR

Fuente

tbutcaru

👍5

Comentario más útil

Después de muchos intentos, encontré una manera de hacer que funcionen las tragamonedas dinámicas múltiples. Cuando agrego claves al elemento raíz de las plantillas de tragamonedas dinámicas, funciona:

esto no funciona: reproduce aquí

   <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 ="

este trabajo: reproducir aquí

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

// work fine

¿Por qué necesito agregar claves para que funcione? Me perdí algo.

davis90 en 22 ene. 2020

❤4

Todos 7 comentarios

Reproducción

Justineo en 27 mar. 2019

👍2

La taquigrafía solo está disponible cuando se proporciona un argumento. Tratar de usar:
<template v-slot:[dynamicSlotName]> ... </template>

michalzaq12 en 28 mar. 2019

La taquigrafía solo está disponible cuando se proporciona un argumento. Tratar de usar:
<template v-slot:[dynamicSlotName]> ... </template>

Lo intenté antes de crear el problema y el resultado es el mismo 😞

tbutcaru en 28 mar. 2019

👀1

¡Hola a todos!

¿Qué hay de nuevo en esto? Todavía tengo el problema en 2.6.11 reproducir aquí

davis90 en 22 ene. 2020

esto no funciona: reproduce aquí

   <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 ="

este trabajo: reproducir aquí

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

// work fine

¿Por qué necesito agregar claves para que funcione? Me perdí algo.

davis90 en 22 ene. 2020

❤4

La solución de @ davis90 funcionó para mí. No entiendo por qué funciona también.