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

[tanasebutcaru]

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.

[Justineo]

Reproduction

[michalzaq12]

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

[tanasebutcaru]

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 😞

[davis90]

Hi everyone!

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

[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.

[SreeChandan]

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

[Moizsohail]

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

[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

[valentinoli]

Solution proposed by @016 seems to work and is less verbose than adding keys

[FuriosoJack]

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

Thanks look. I working with bootstrap-vue

<template v-slot:[`cell(`+rango.abreviatura+`)`]="data" v-for="rango in rangos">
            <b-form-radio v-model="data.item.valor" :name="'radio-size-'+data.item.id" size="sm" value="1"></b-form-radio>
        </template>