CODEWITHSUNDEEP
vue.jsvuejs2vuejs3ant-design-vue
clyndon
clyndon

Reputation: 79

How to move slot and slot-scope to vue 3 v-slot rule

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>

enter image description here

Upvotes: 4

Views: 16645

Answers (3)

addin
addin

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

tony19
tony19

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

Ali Abbasov
Ali Abbasov

Reputation: 113

According to this documentation you should change slot to v-slot

Upvotes: 0

Related Questions