Я пытаюсь передать editTodo в качестве функции реквизита от родительского app.vue к дочерним компонентам ... Компонент TodoItem.vue есть список элементов, а время возвращается в основной пользовательский ввод полей newTodo и dateTime. На самом деле, я новичок в изучении Vue js, и у меня есть немного знаний о передаче пропсов между компонентами.
<template>
<div id="app" class="container">
<TodoInput :addTodo="addTodo"
:updateTodo="updateTodo"
/>
<todo-item v-for="(todo, index) in todos"
:key=todo.id
:todo=todo
:index =index
:removeTodo="removeTodo"
:editTodo="editTodo" />
</div>
</template>
<script>
import TodoInput from "./components/TodoInput.vue";
import TodoItem from "./components/TodoItem.vue";
export default {
name: "App",
components: {
TodoInput,
TodoItem,
},
data() {
return {
editing:false,
editItems:{},
todos: [
// {
// id: 1,
// title: "",
// date: new Date(),
// editing: false,
// completed: false,
// },
// {
// id: 1,
// title: "",
// date: new Date(),
// editing: false,
// completed: false,
// },
],
};
},
methods: {
editTodo(index, newTodo, dateTime){
, ' dateTime ', dateTime)
// this.editItems = {
// id,
// title,
// time,
// }
this.todo = newTodo
this.todo = dateTime
this.selectedIndex = index
this.editing = true
},
В компоненте TodoItem.vue есть список элементов и время, возвращаемое к основному вводу пользователя в поля newTodo и dateTime. *** _ 2_
`**
--> {{todo.title}} {{todo.time}}</div> <div class="remove-item" @click="removeTodo(index)"> × </div> <div class="edit-item" @click="eiditTodo(index)" > <i class="fas fa-edit" id="edit"></i> </div>
экспорт по умолчанию {name: 'todo-item', props: {todo: {type: Object, required: true,}, removeTodo: {type: Function, required: true,}, index: {type: Number, required: true ,},
},
data(){
return{
'id': this.todo.id,
'title': this.todo.newTodo,
'time': this.todo.dateTime,
}
methods:
getEdit(){
this.$emit('editTodo', this.selectedIndex)
}
**`