2.6.10
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]
動的スロット名の1つが静的になっている場合(どちらでもかまいません)、アプリケーションは機能しています。
node_modules/vue-template-compiler/build.js
attrs.forEach(function (attr) {
)は次の警告を追加しました:warn$1('--------------->> ' + attr.name);
#[headerslot]
#[headerslot]>Header slot</template>
Default slot
<template #[footerslot]
したがって、複数の動的スロット名がある場合、コンパイラは属性だけを抽出する方法を知らないようです。
省略形は、引数が指定されている場合にのみ使用できます。 使用してみてください:
<template v-slot:[dynamicSlotName]>
...
</template>
省略形は、引数が指定されている場合にのみ使用できます。 使用してみてください:
<template v-slot:[dynamicSlotName]> ... </template>
問題を作成する前にそれを試しましたが、結果は同じです😞
皆さんこんにちは!
これについて何が新しいのですか? 2.6.11でまだ問題がありますここで再現
何度も試した後、マルチダイナミックスロットを機能させる方法を見つけました。 ダイナミクススロットテンプレートのルート要素にキーを追加すると、機能します。
これは機能しません:ここで再現してください
<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のソリューションは私のために働いた。 なぜそれが機能するのかわかりません。
エラーがvueで非常に誤解を招くのはなぜですか。 あなたの解決策はうまくいきましたがありがとう
最も参考になるコメント
何度も試した後、マルチダイナミックスロットを機能させる方法を見つけました。 ダイナミクススロットテンプレートのルート要素にキーを追加すると、機能します。
これは機能しません:ここで再現してください
この作品:ここで複製
それを機能させるためにキーを追加する必要があるのはなぜですか? 私は何かを逃した。