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

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.

[davis90]

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.

[016]

Hey all, I am using vue 2.6.10, I got same problem, after google something I found this way to fix it.

  <template v-slot:[`content_`+ValueA]="" >
    12345
  </template>
  <template v-slot:[`content_`+ValueB]>
    12345+101
  </template>

the main idea is add ‘=“”’ after [], remember only last one can keep without =“”, for short just add =“” for all v-slot

good luck for everyone.

btw VUE is good.

a online demo based on @Justineo demo code