Styjun

I am using vue + vue-material to diplay a table.

on the vue-material docs i found, that rendering a table is very easy due to "slots" in vue found here at "custom template" - so i gave it a go on a simplified example with just name+age of 2 people.

<template>
 <md-table v-model="people">
 <md-table-row slot="md-table-row" slot-scope=" item ">
 <md-table-cell md-label="name"> item.name </md-table-cell>
 <md-table-cell md-label="age"> item.age </md-table-cell>
 </md-table-row>
 </md-table>
</template>

<script>
 export default 
 name: 'app',
 data: () => 
 return 
 people: [
 name: "Alice", age: 22,
 name: "Bob", age: 21
 ]
 
 ,
 
</script>

works a treat. Then i looked up slots on the vue docs, and found there is a new syntax for scoped slots on vue 2.6+. So naturally i wanted to try it:

<template>
 <md-table v-model="people">
 <md-table-row v-slot:md-table-row=" item ">
 <md-table-cell md-label="name"> item.name </md-table-cell>
 <md-table-cell md-label="age"> item.age </md-table-cell>
 </md-table-row>
 </md-table>
</template>

This does not render the table and also does not log any errors to the javascript console.

I found the place where this slot is defined here on the vue-material github, to verify everything would be set up according to the vue documentation:

 <tbody v-else-if="value.length">
 <md-table-row-ghost
 v-for="(item, index) in value"
 :key="getRowId(item, mdModelId)"
 :md-id="getRowId(item, mdModelId)"
 :md-index="index"
 :md-item="item">
 <slot name="md-table-row" :item="item" />
 </md-table-row-ghost>
 </tbody>

And yes, slot name is set, and v-bind:item="item" is also there, so as i understand, this should work with the new v-slot syntax.

Am I missing something?

EDIT.:

vue version 2.6.6
vue material 1.0.0.beta-10.2

I tried setting up a simple component defined just a slot (same name, also binding to :item) and wired it up using the "new" syntax - it worked.

appSlot:

<template>
 <div>
 <div v-for="name in names" :key="name">
 <slot name="red-scope"
 :content="name">
 </slot>
 </div>
 </div>
<template>

where names comes via a property from AppWrapper:

<template>
 <AppSlot :names="names">
 <template #red-scope=" content ">
 <p>hi content</p>
 </template>
 </AppSlot>
</template>
...
data() => 
 return 
 names: ["Alice", "Bob"]
 

Does not make a lot of practical sense, but it verifies that my setup can handle the new syntax and it works