Vue: Ошибка при использовании нескольких имен динамических слотов (недопустимое выражение динамического аргумента)

Созданный на 27 мар. 2019 · 7Комментарии · Источник: vuejs/vue

Версия

2.6.10

Ссылка для воспроизведения

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

Действия по воспроизведению

Клонируйте это репо: https://github.com/tbutcaru/v-issue-multiple-dynamic-slot-names
Выполнить: npm install
Выполнить: npm run serve

Что ожидается?

Множественные имена динамических слотов должны работать должным образом.

Что на самом деле происходит?

Выдается следующая ошибка:

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

Если одно из динамических имен слотов сделано статическим (неважно какое), приложение работает.

Мое расследование

файл: node_modules/vue-template-compiler/build.js
Строка: 2563 (внутри attrs.forEach(function (attr) { ) добавлено следующее предупреждение:

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

Результаты расследования:

В рабочем сценарии только с одним динамическим именем слота: значение этого имени динамического слота - #[headerslot]
В сценарии ошибки с двумя динамическими именами слотов: значение первого динамического имени слота равно

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

Итак, похоже, что компилятор не знает, как извлечь только атрибут при наличии нескольких имен динамических слотов.

bug has PR

Источник

tbutcaru

👍5

Самый полезный комментарий

После многих попыток я нашел способ заставить работать многодинамические слоты. Когда я добавляю ключи к корневому элементу шаблонов слотов динамики, он попадает в работу:

это не работает: воспроизвести здесь

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

это произведение: воспроизвести здесь

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

// work fine

Почему мне нужно добавлять ключи, чтобы он работал? Я что-то упустил.

davis90 22 янв. 2020

❤4

Все 7 Комментарий

Размножение

Justineo 27 мар. 2019

👍2

Сокращение доступно, только если указан аргумент. Попробуй использовать:
<template v-slot:[dynamicSlotName]> ... </template>

michalzaq12 28 мар. 2019

Сокращение доступно, только если указан аргумент. Попробуй использовать:
<template v-slot:[dynamicSlotName]> ... </template>

Я пробовал это, прежде чем создавать проблему, и результат тот же

tbutcaru 28 мар. 2019

👀1

Всем привет!

Что нового в этом? У меня все еще проблема в 2.6.11 воспроизвести здесь

davis90 22 янв. 2020

это не работает: воспроизвести здесь

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

это произведение: воспроизвести здесь

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

// work fine

Почему мне нужно добавлять ключи, чтобы он работал? Я что-то упустил.

davis90 22 янв. 2020

❤4

Решение @ davis90 сработало для меня. Я тоже не понимаю, почему это работает.