Vue: Kesalahan menggunakan beberapa nama slot dinamis (Ekspresi argumen dinamis tidak valid)

Dibuat pada 27 Mar 2019  ·  7Komentar  ·  Sumber: vuejs/vue

Versi: kapan

2.6.10

Tautan reproduksi

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

Langkah-langkah untuk mereproduksi

  1. Gandakan repo ini: https://github.com/tbutcaru/v-issue-multiple-dynamic-slot-names
  2. Jalankan: npm install
  3. Jalankan: npm run serve

Apa yang diharapkan?

Beberapa nama slot dinamis harus berfungsi seperti yang diharapkan.

Apa yang sebenarnya terjadi?

Kesalahan berikut terjadi:

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

Jika salah satu nama slot dinamis dibuat statis (tidak masalah yang mana), aplikasi tersebut berfungsi.

Investigasi saya
  • file: node_modules/vue-template-compiler/build.js
  • baris: 2563 (di dalam attrs.forEach(function (attr) { ) ditambahkan peringatan berikut:
warn$1('--------------->> ' +  attr.name);
Hasil investigasi:
  1. Dalam skenario kerja dengan hanya satu nama slot dinamis: nilai nama slot dinamis itu adalah #[headerslot]
  2. Dalam skenario galat dengan dua nama slot dinamis: nilai nama slot dinamis pertama adalah
#[headerslot]>Header slot</template>
    Default slot
    <template #[footerslot]

Jadi, sepertinya compiler tidak mengetahui cara mengekstrak atribut hanya jika ada beberapa nama slot dinamis.

bug has PR

Komentar yang paling membantu

Setelah banyak mencoba, saya menemukan cara untuk membuat slot multi dinamis berfungsi. Ketika saya menambahkan kunci ke elemen root dari templat slot dinamika, itu akan berfungsi:

ini tidak berhasil: buat ulang di sini

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

pekerjaan ini: mereproduksi di sini

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

// work fine

Mengapa saya perlu menambahkan kunci agar berfungsi? Saya melewatkan sesuatu.

Semua 7 komentar

Singkatan hanya tersedia jika argumen diberikan. Coba gunakan:
<template v-slot:[dynamicSlotName]> ... </template>

Singkatan hanya tersedia jika argumen diberikan. Coba gunakan:
<template v-slot:[dynamicSlotName]> ... </template>

Saya sudah mencobanya sebelum membuat masalah dan hasilnya sama 😞

Halo semuanya!

Apa yang baru tentang ini? Saya masih memiliki masalah di 2.6.11 mereproduksi di sini

Setelah banyak mencoba, saya menemukan cara untuk membuat slot multi dinamis berfungsi. Ketika saya menambahkan kunci ke elemen root dari templat slot dinamika, itu akan berfungsi:

ini tidak berhasil: buat ulang di sini

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

pekerjaan ini: mereproduksi di sini

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

// work fine

Mengapa saya perlu menambahkan kunci agar berfungsi? Saya melewatkan sesuatu.

Solusi @ davis90 berhasil untuk saya. Saya tidak mengerti mengapa itu berhasil juga.

Mengapa kesalahan begitu menyesatkan dalam vue. Terima kasih, meskipun solusi Anda berhasil

Apakah halaman ini membantu?
0 / 5 - 0 peringkat