Update documentation how to use v-slot in jsx

[andtii]

Since vue 2.6 has a new concept for slots the documentation https://github.com/vuejs/jsx#slots should be updated to reflect how this should be used. @yyx990803 or @nickmessing Do we have a nice story for the jsx community on this? We are currently updating to vuetify 2 which forces the new v-slot approach so getting the docs updated would be really nice.

[ispal]

I have faced this issue and I have boiled it down to the following. Vuetify 2.* uses v-on="on" to pass data to scoped slots which I guess translates to vOn={on} in JSX. Here's a problem if I try to use that JSX syntax: [Vue warn]: Failed to resolve directive: on. It doesn't recognise that syntax. If I add vOn:mouseenter={on.mouseenter}, it works. It seems to me that vOn doesn't work without modifiers and that's what the Vuetify expects. Vuetify exposes different kind of events to scope and manually adding them one by one is not wanted.

Am I missing something here or is this a bug?

[ispal]

I found out that it's possible to use JSX with Vuetify 2.*. Reading the JSX docs this line caught my eye: with the spread operator (object needs to be compatible with Vue Data Object). If you want to bind events in JSX, you need to use Vue Data Object's on property.

Here's an example using Vuetify's tooltip component

<v-tooltip 
  top 
  scopedSlots={{
    activator: ({on}) => <v-btn {...{ on }}>Test button</v-btn>
  }}
>

The syntax is not that nice but it works. I hope this helps fellow developers.

[optiman917]

Hi, @ispal. I used this syntax. It works. Thank you. I want to learn more about passing slots in jsx syntax. I'm making reusable table component using b-table of bootstrap-vue. How to pass all slots of b-table to child component using $slots and $scopedSlots?

[optiman917]

I found the solution to this problem myself.

<div class="table-responsive">
     <b-table
         props={this.options}
         items={this.$props.items}
         fields={this.$props.fields}
         per-page={this.perPage}
         current-page={this.currentPage}
         filter={this.filter}
         onFiltered={this.onFiltered}
         scopedSlots={this.$scopedSlots}
     />
</div>