Slots with modifiers

[KaelWD]

Version

3.0.0-beta.14

Reproduction link

https://vue-next-template-explorer.netlify.app/...

Steps to reproduce

Use v-slot with a dot in the name

What is expected?

It should be compiled to a slot 'item.name'

What is actually happening?

It's compiled to 'item', the "modifier" is ignored

---

vuejs/eslint-plugin-vue#1165

This works in Vue 2, it was originally slot="item.name". We use this to create slots for arbitrary properties on objects.

[yyx990803]

That’s a parser level change - making it work is essentially adding a special case to the parsing rules. Ideally we should avoid that.

Is it difficult to switch to different slot names?

[KaelWD]

Ah I see the AST is completely different now, vue-template-compiler parses v-slot to scopedSlots instead of keeping the template element.

Is it difficult to switch to different slot names?

It's used for arbitrary property lookup on objects, so { foo: { bar: 'baz' } } can be accessed with v-slot:item.foo.bar. I suppose we could remove this ability in v3 and require users to flatten their objects first.

It looks like vue-template-compiler can do v-slot:['item.name'] but @vue/compiler-core throws Attribute name cannot contain U+0022 ("), U+0027 ('), and U+003C (<)

[b-strauss]

Vuetify does this on their table component in combination with dynamic slot names.

https://vuetifyjs.com/en/components/data-tables/#api

var items = [
  {
    firstname: 'foo',
    lastname: 'bar',
  },
];

<v-data-table :items="items">
  <!-- this slot only applies to the firstname column. -->
  <template v-slot:item.firstname="{item}">
  </template>
</v-data-table>

The point is to differentiate the dynamic parts of the slot name from the static one.

[Justineo]

IMO in Vue templates there’s a unified syntax of v-directive:arg.modifier (to learn and remember) and this change is breaking this syntax. Is there any chance we make the name part as a modifier for the v-slot directive to avoid introducing more caveats on the syntax?