@MeMoJlor

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

Всем доброго дня.
В данном случае есть два компонента: родительский-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>
  • Вопрос задан
  • 105 просмотров
Решения вопроса 2
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
По уму такие вещи делаются через emit.
Компонент emit'ит событие, родитель обрабатывает его.
В компоненте:
<button @click="$emit('success')">button1</button>
В родителе:
<TodoItem item='sdfsdf' @success='succesItem'></TodoItem>
Ответ написан
0xD34F
@0xD34F Куратор тега Vue.js
Нет никакой функции, нечему работать. Вы выполняете статическую привязку значения параметра, так что передаёте в компонент строку, а не функцию:

succesItem='succesItem'

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы