Deleting an object in Vue, emitting from child to parent and to parent

user_8807062 0
Viewed 767

I have created a simple to do app in VUE.

In order to delete a card (each card is an object with an id, title and description located in state in an App.vue component), I am passing and id from App as a prop to TaskList and to the button (delete) in the Task component. Then in order trigger a deleteTask function, again I am emmiting an id from Task to TaskList and then to App.

This approach works. However, is that kind of long chain of emmiting is considered as good practice? Is there a better way to do it?

App.vue

<template>
  <div>
    <TaskList :tasks="tasks" @id="deleteTask"/>
    <Form :length="tasks.length" @addTask="addNewTask" />
  </div>
</template>

<script>

import TaskList from './components/TaskList';
import Form from './components/Form';

export default {
  name: 'App',
  components: { TaskList, Form },
      data() {
        return {
            tasks: [
                {
                    id: 1,
                    title: 'Hello World',
                    description: 'this is the world'
                },
                {
                    id: 2,
                    title: 'Hello Mars',
                    description: 'this is the mars'
                },
                {
                    id: 3,
                    title: 'Hello Jupiter',
                    description: 'this is the jupiter'
                }
            ]
        }
    },
    methods: {
      addNewTask(taskObject) {
        const listOfTasks = this.tasks.concat(taskObject);
        this.tasks = listOfTasks;
      },
      deleteTask(id) {
        const filteredList = this.tasks.filter(element => {
          return element.id != id;
        })
        this.tasks = filteredList;
      }
    }
}
</script>

TaskList.vue

<template>
  <div class="taskList" v-bind:key="task" v-for="task in tasks">
      <Task :title="task.title" :description="task.description" :id="task.id" @id="sendId"/>
  </div>
</template>

<script>

import Task from './Task';

export default {
    props: ['tasks'],
    components: { Task },
    methods: {
      sendId(id) {
        this.$emit('id', id);
        console.log(id)
      }
    }
}

</script>

Task.vue

<template>
  <div class="task">
      <h1>{{ title }}</h1>
      <p>{{ description }}</p>
      <button @click="passId">Delete</button>
  </div>
</template>

<script>
export default {
    props: ['title', 'description', 'id'],
    methods: {
        passId() {
            this.$emit('id', this.id);
        }
    }
}
</script>
vuejs3 vue.js javascript
1 Answers

One sure way of reducing this chain of data transfer is by using Vuex, But if you don't want to use that you can also use an "EventBus"

NOTE - Still you will have to pass the id from parent to child

  • Creating event bus
// src > eventBus.js

import Vue from 'vue'
export default new Vue()
  • Emit the event when the user clicks on the delete button
// Task.vue
<template>
  <div class="task">
      <h1>{{ title }}</h1>
      <p>{{ description }}</p>
      <button @click="passId">Delete</button>
  </div>
</template>

<script>
import EventBus from 'path/to/eventBus'

export default {
    props: ['title', 'description', 'id'],
    methods: {
        passId() {
            EventBus.$emit('delete-task', this.id);
        }
    }
}
</script>
  • Listen to the event on the topmost parent
<template>
  <div>
    <TaskList :tasks="tasks" @id="deleteTask"/>
    <Form :length="tasks.length" @addTask="addNewTask" />
  </div>
</template>

<script>

import TaskList from './components/TaskList';
import Form from './components/Form';
import EventBus from 'path/to/eventBus.js'

export default {
  name: 'App',
  components: { TaskList, Form },
      data() {
        return {
            tasks: [
                {
                    id: 1,
                    title: 'Hello World',
                    description: 'this is the world'
                },
                {
                    id: 2,
                    title: 'Hello Mars',
                    description: 'this is the mars'
                },
                {
                    id: 3,
                    title: 'Hello Jupiter',
                    description: 'this is the jupiter'
                }
            ]
        }
    },
    mounted(){
      // Listening to the delete-task event
      EventBus.$on('delete-task', (id) => {
        this.deleteTask(id)
      })
    },
    methods: {
      addNewTask(taskObject) {
        const listOfTasks = this.tasks.concat(taskObject);
        this.tasks = listOfTasks;
      },
      deleteTask(id) {
        const filteredList = this.tasks.filter(element => {
          return element.id != id;
        })
        this.tasks = filteredList;
      }
    }
}
</script>
user_130246380
Related