Vue: Error using multiple dynamic slot names (Invalid dynamic argument expression)

Created on 27 Mar 2019 · 7Comments · Source: vuejs/vue

Version

2.6.10

Reproduction link

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

Steps to reproduce

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

What is expected?

Multiple dynamic slot names should work as expected.

What is actually happening?

The following error is thrown:

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

If one of the dynamic slot names is made static (doesn't matter which), the application is working.

My investigation

file: node_modules/vue-template-compiler/build.js
line: 2563 (inside attrs.forEach(function (attr) {) added the following warn:

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

Investigation results:

In the working scenario with only one dynamic slot name: the value of that dynamic slot name is #[headerslot]
In the error scenario with two dynamic slot names: the value of the first dynamic slot name is

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

So, it looks like the compiler doesn't know how to extract just the attribute when there are multiple dynamic slot names.

bug has PR

Source

tbutcaru

👍5

Most helpful comment

After many tries, I found a way to make multi dynamic slots work. When i add keys to root element of the dynamics slot templates, it fall in work:

this doesn't work: reproduce here

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

this work: reproduce here

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

// work fine

Why i need to add keys to make it work? I missed something.

davis90 on 22 Jan 2020

❤4

All 7 comments

Reproduction

Justineo on 27 Mar 2019

👍2

The shorthand is only available when an argument is provided. Try to use:
<template v-slot:[dynamicSlotName]> ... </template>

michalzaq12 on 28 Mar 2019

The shorthand is only available when an argument is provided. Try to use:
<template v-slot:[dynamicSlotName]> ... </template>

I've tried that before creating the issue and the result is the same 😞

tbutcaru on 28 Mar 2019

👀1

Hi everyone!

What new about this ? I still have the problem in 2.6.11 reproduce here

davis90 on 22 Jan 2020

After many tries, I found a way to make multi dynamic slots work. When i add keys to root element of the dynamics slot templates, it fall in work:

this doesn't work: reproduce here

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

this work: reproduce here

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

// work fine

Why i need to add keys to make it work? I missed something.

davis90 on 22 Jan 2020

❤4

@davis90 's solution worked for me. I don't get why it works too.