How to change data from the parent component on Vue

Question

I started using Vue today and I'm doing a Todo app.

How can I change the APIData array from the ItemRow child component

<template>
    <div id="index">
        <div class="container">
            <div class="card">
                <div class="card-header">
                    <div class="card-header-title">
                        TO-DO
                    </div>
                    <div class="card-header-input">
                        <input type="text" v-model="newTask">
                        <button @click="createTask(newTask)">Create</button>
                    </div>
                </div>
                <div class="card-content">
                    <table>
                        <thead>
                            <th>Title</th>
                            <th>Created At</th>
                            <th>Completed</th>
                            <th>Delete</th>
                        </thead>
                        <tbody>
                            <ItemRow 
                                v-for="(task, index) in APIData"
                                :key="task.id"
                                :task="task"
                                :index="index"
                            >
                            </ItemRow>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { api } from '../axios-api'
import ItemRow from '../components/ItemRow.vue'

export default {
    name: 'index',
    components: {
        ItemRow,
    },
    data() {
        return {
            newTask: '',
            APIData: [],
        }
    },
    created() {
        api.get('tasks/',)
          .then(response => {this.APIData = response.data})
    },
    methods: {
        createTask(title) {
            api.post('tasks/', {title: title})
              .then((response) => {
                  this.APIData.unshift(response.data)
                  this.newTask = ''
              })
        },
    },
}
</script>

ItemRow component:

<template>
    <tr>
        <td>{{ task.title }}</td>
        <td>{{ formatDate(task.created_at) }}</td>
        <td><input type="checkbox" :checked="task.complete" @click="completeTask(task)"></td>
        <td><button @click="deleteTask(task, index)">Delete</button></td>
    </tr>
</template>

<script>
import moment from 'moment';
import { api } from '../axios-api'
import APIData from '../views/Index.vue'

export default {
    name: "ItemRow",
    props: {
        task: {
            type: Object,
            required: true,
        },
        index: {
            type: Number,
            required: true,
        }
    },
    methods: {
        completeTask(task) {
            api.patch(`tasks/${task.id}/`, { complete: !task.complete })
            .catch(response => {
                console.log('error', response)
            })
        },
        deleteTask(task, index) {
            api.delete(`tasks/${task.id}/`)
              .then(() => {
                  APIData.splice(index, 1)
              })
        },
        formatDate(date) {
            return moment(date).format('YYYY-MM-DD');
        },
    }
}
</script>

When I click on delete vue is calling @click="deleteTask(task, index)" , How I update my APIData about this change? I', trying to import import APIData from '../views/Index.vue' but I'm not confident on this method.

Answer 1

you cant do like this import APIData from '../views/Index.vue' for child to parent communication we want to use $emit in vuejs && for parent to child we want to use props