4

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

tony19
  • 125,647
  • 18
  • 229
  • 307
clyndon
  • 61
  • 1
  • 1
  • 5

3 Answers3

8

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>
tony19
  • 125,647
  • 18
  • 229
  • 307
3

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>
addin
  • 126
  • 9
0

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

Ali Abbasov
  • 113
  • 1
  • 2
  • 7
  • Yes, I've tried but I get an error instead `` – clyndon Jun 15 '21 at 14:04
  • What error are you getting? You can try changing `v-slot="from"` to `v-slot:from` as mentioned in the [documentation](https://eslint.vuejs.org/rules/no-deprecated-slot-attribute.html) – Ali Abbasov Jun 15 '21 at 14:05
  • Actually nothing showed when I changed to `v-slot="from"` or `v-slot:from` in the – clyndon Jun 15 '21 at 14:22