Vue: Erro ao usar vários nomes de slots dinâmicos (expressão de argumento dinâmico inválida)

Criado em 27 mar. 2019 · 7Comentários · Fonte: vuejs/vue

Versão

2.6.10

Link de reprodução

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

Passos para reproduzir

Clone este repo: https://github.com/tbutcaru/v-issue-multiple-dynamic-slot-names
Executar: npm install
Executar: npm run serve

O que é esperado?

Vários nomes de slots dinâmicos devem funcionar conforme o esperado.

O que realmente está acontecendo?

O seguinte erro é gerado:

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

Se um dos nomes de slot dinâmico se tornar estático (não importa qual), o aplicativo está funcionando.

Minha investigação

arquivo: node_modules/vue-template-compiler/build.js
linha: 2563 (dentro de attrs.forEach(function (attr) { ) adicionado o seguinte aviso:

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

Resultados da investigação:

No cenário de trabalho com apenas um nome de slot dinâmico: o valor desse nome de slot dinâmico é #[headerslot]
No cenário de erro com dois nomes de slot dinâmico: o valor do primeiro nome de slot dinâmico é

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

Portanto, parece que o compilador não sabe como extrair apenas o atributo quando há vários nomes de slots dinâmicos.

bug has PR

Fonte

tbutcaru

👍5

Comentários muito úteis

Depois de muitas tentativas, descobri uma maneira de fazer os slots multi-dinâmicos funcionarem. Quando adiciono chaves ao elemento raiz dos modelos de slot de dinâmica, isso funciona:

isso não funciona: reproduza aqui

   <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 trabalho: reproduza aqui

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

// work fine

Por que preciso adicionar chaves para fazer funcionar? Eu perdi algo.

davis90 em 22 jan. 2020

❤4

Todos 7 comentários

Reprodução

Justineo em 27 mar. 2019

👍2

A abreviação está disponível apenas quando um argumento é fornecido. Tente usar:
<template v-slot:[dynamicSlotName]> ... </template>

michalzaq12 em 28 mar. 2019

A abreviação está disponível apenas quando um argumento é fornecido. Tente usar:
<template v-slot:[dynamicSlotName]> ... </template>

Eu tentei isso antes de criar o problema e o resultado é o mesmo 😞

tbutcaru em 28 mar. 2019

👀1

Olá a todos!

O que há de novo nisso? Eu ainda tenho o problema em 2.6.11 reproduzir aqui

davis90 em 22 jan. 2020

Depois de muitas tentativas, descobri uma maneira de fazer os slots multi-dinâmicos funcionarem. Quando adiciono chaves ao elemento raiz dos modelos de slot de dinâmica, isso funciona:

isso não funciona: reproduza aqui

   <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 trabalho: reproduza aqui

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

// work fine

Por que preciso adicionar chaves para fazer funcionar? Eu perdi algo.

davis90 em 22 jan. 2020

❤4

A solução de @davis90 funcionou para mim. Eu não entendo por que isso funciona também.