Reproduction

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

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

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

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>