[Vuejs]-Sending data to a non parent component in VueJs

by

2👍

✅

When I tried to delete by clicking the x button in your codePen example, I see the error: this.$parent.todos.$remove is not a function.

I have not looked deeply into your code. But attempting to access parent component methods using this.$parent is not a good idea. Reason: a component can be used anywhere, and assuming that it will have a $parent with a particular property or method is risky.

As you suggested in your question, you need to use $emit from the child component to delete the data.

There was another similar question here few days ago, for which I created a jsFiddle: https://jsfiddle.net/mani04/4kyzkgLu/

The child component has some code like:

<button @click="$emit('delete-row')">Delete</button>

This sends out an event to parent component. Parent component can subscribe to that event using v-on as seen in that jsFiddle example.

Here is that other question for reference: Delete a Vue child component

👤Mani

0👍

It’s preferable to use your methods (DeleteTodo, EditTodo…) in your parent.

var app = new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [{
      id: 1,
      title: 'Go to the grocery',
      completed: false
    }, {
      id: 2,
      title: 'See the movie',
      completed: true
    }, {
      id: 3,
      title: 'Jack Reacher : Tom Cruise',
      completed: false
    }]
  },

  methods: {
    addTodo: function() {
      this.todos.push({
        todo: this.newTodo.trim(),
        completed: false
      });
      this.newTodo = ''
    },

    deleteTodo: function(todo) {
      this.todos = this.todos.filter(function(i) {
        return i !== todo
      })
    }
  }
});
<div id="app">
  <ul>
    <li v-for="todo in todos">{{ todo.title }}
      <button @click.prevent="deleteTodo(todo)">
        Delete
      </button>
    </li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
👤Med

Leave a comment