Reputation: 79
I get this error when I'm using Ant-design table for VueJS
<template slot="name" slot-scope="name"> {{ name.first }} {{ name.last }} </template>
After I changed to Vue 3 rules still nothing showed:
<template v-slot:name v-slot="name"> {{ name.first }} {{ name.last }} </template>
Upvotes: 4
Views: 16640
Reputation: 146
Base on this link https://vuejs.org/guide/components/slots.html#scoped-slots we can use like this :
Old Version :
<template slot="header" slot-scope="headerProps">
{{ headerProps }}
</template>
New update :
<MyComponent>
<template #header="headerProps">
{{ headerProps }}
</template>
<template #default="defaultProps">
{{ defaultProps }}
</template>
<template #footer="footerProps">
{{ footerProps }}
</template>
</MyComponent>
Upvotes: 3
Reputation: 138696
Your markup below doesn't work because it marks the template with two slot names; i.e., the name
slot (in v-slot:name
) as well as the default
slot (in v-slot="name"
):
<template v-slot:name v-slot="name"> {{ name.first }} {{ name.last }} </template>
^^^^^^^^^^^ ^^^^^^^^^^^^^
Here's the correct fix:
<template v-slot:name="name"> {{ name.first }} {{ name.last }} </template>
Upvotes: 8
Reputation: 113
According to this documentation you should change slot
to v-slot
Upvotes: 0