Vue: 複数の動的スロット名の使用中にエラーが発生しました（動的引数式が無効です）

作成日 2019年03月27日 · 7コメント · ソース: vuejs/vue

バージョン

2.6.10

複製リンク

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

再現する手順

このリポジトリのクローンを作成します： //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]

動的スロット名の1つが静的になっている場合（どちらでもかまいません）、アプリケーションは機能しています。

私の調査

ファイル： node_modules/vue-template-compiler/build.js
行：2563（ attrs.forEach(function (attr) { ）は次の警告を追加しました：

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

調査結果：

動的スロット名が1つしかない作業シナリオでは、その動的スロット名の値は#[headerslot]
2つの動的スロット名があるエラーシナリオの場合：最初の動的スロット名の値は

#[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 2020年01月22日

❤4

全てのコメント7件

再生

Justineo 2019年03月27日

👍2

省略形は、引数が指定されている場合にのみ使用できます。使用してみてください：
<template v-slot:[dynamicSlotName]> ... </template>

michalzaq12 2019年03月28日

省略形は、引数が指定されている場合にのみ使用できます。使用してみてください：
<template v-slot:[dynamicSlotName]> ... </template>

問題を作成する前にそれを試しましたが、結果は同じです😞

tbutcaru 2019年03月28日

👀1

皆さんこんにちは！

これについて何が新しいのですか？ 2.6.11でまだ問題がありますここで再現

davis90 2020年01月22日

これは機能しません：ここで再現してください

   <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 2020年01月22日

❤4

@ davis90のソリューションは私のために働いた。なぜそれが機能するのかわかりません。

SreeChandan 2020年06月08日

エラーがvueで非常に誤解を招くのはなぜですか。あなたの解決策はうまくいきましたがありがとう

Moizsohail 2020年07月20日

このページは役に立ちましたか？

0 / 5 - 0 評価

Vue: 複数の動的スロット名の使用中にエラーが発生しました（動的引数式が無効です）

バージョン

複製リンク

再現する手順

何が期待されますか？

実際に何が起こっているのですか？

私の調査

調査結果：

最も参考になるコメント

全てのコメント7件

関連する問題