Function call in v-slot, vue.js - vue.js

Question

I'm trying to process some data in v-slot template, but I get the following error:
getNameFromCategory is not defined
What is wrong?
<template v-slot:items="{ row }" >
<TableView :rows="results" >
<td>{{ getNameFromCategory(row.category) }}</td>
</TableView>
</template>
<script>
export default {
components: {
TableView
},
metdods:{
getNameFromCategory
},
props: {
'results': {
type: Array,
required: true
},
}
</script>
and then in the TableVue.vue component file:
<template>
<template v-if="numRows > 0">
<tr
v-for="(row, idx) in rows"
:key="idx"
>
<slot name="items" :row="row"></slot>
</tr>
</template>
</template>
<script>
export default {
name: 'TableView',
props:{
rows: {
type: Array,
default() {
return []
},
required: true
},
}
}
</script>
It seems that the code passed through the slot template is executed in the component, but I also tried to define the 'getNameFromCategory' function there, it didn't work.

Answer 1

You wrote metdods instead of methods. Also the getNameFromCategory is empty i don't know if it is for the sake of the example.
Anyway it should more look like this :
<template v-slot:items="{ row }" >
<TableView :rows="results" >
<td>{{ getNameFromCategory(row.category) }}</td>
</TableView>
</template>
<script>
export default {
components: {
TableView
},
methods:{
getNameFromCategory(category) {
return category.name;
}
},
props: {
'results': {
type: Array,
required: true
},
}
</script>