Почему не работает функция в Vue?

Question

[MeMoJlor]

Всем доброго дня.
В данном случае есть два компонента: родительский-todoList, дочерний-todoItem.
Навесил директиву @click на кнопку в todoItem и передаю клик на родительский элемент, но выскакивает ошибка.

Ошибка:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function"
found in
---> at src/components/TodoItem.vue
at src/components/TodoList.vue
at src/App.vue


todoList:

<template>
	<div>
		<TodoItem item='sdfsdf' succesItem='succesItem'></TodoItem>
	</div>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default{
	name: 'TodoList',
	data() {
		return {
			items: this.$store.getters.posts
		};
		
	},
	components: {
		TodoItem,
	},
	methods: {
		succesItem() {	
			console.log(1);
		}
	}
}
</script>

todoItem:

<template>
	<div class="main">
		<div class="text">{{ item }}</div>
		<div class="buttons">
			<button @click='succesItem'>button1</button>
			<button>button2</button>
		</div>
	</div>
</template>

<script>
export default{
	name: 'TodoItem',
	props: ['item', 'succesItem']
	
}
</script>

Answer 1

[Rsa97]

По уму такие вещи делаются через emit.
Компонент emit'ит событие, родитель обрабатывает его.
В компоненте:
<button @click="$emit('success')">button1</button>
В родителе:

<TodoItem item='sdfsdf' @success='succesItem'></TodoItem>

Comments

[MeMoJlor]

Спасибо, очень помогли

Answer 2

[0xD34F]

Нет никакой функции, нечему работать. Вы выполняете статическую привязку значения параметра, так что передаёте в компонент строку, а не функцию:

succesItem='succesItem'

А вообще, вам не мешало бы почитать документацию, чтобы узнать, как правильно в родительских компонентах обрабатывать события дочерних.