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

  1. Clone this repo: https://github.com/tbutcaru/v-issue-multiple-dynamic-slot-names
  2. Run: npm install
  3. 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:
  1. In the working scenario with only one dynamic slot name: the value of that dynamic slot name is #[headerslot]
  2. 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

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.

All 7 comments

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

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 😞

Hi everyone!

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

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 's solution worked for me. I don't get why it works too.

Why are the errors so misleading in vue. Thanks though your solution worked

Was this page helpful?
0 / 5 - 0 ratings