Отправка данных не-родительскому компоненту в VueJs

Question

Я пытаюсь реплицировать TODO MVC в VueJs. (Пожалуйста, проверка этого codepen: http://codepen.io/sankalpsingha/pen/gwymJg) Я создал компонент под названием «TODO-лист» со следующим кодом:

Vue.component('todo-list',{ 
     template: '#todo-list', 
     props: ['todo'], 
     data: function(){ 
      return { 
       // Let us set up a isEditing Boolean so that we can know if the user 
       // will edit something and we need to change the state to reflect it. 
       isEditing: false 
      } 
     }, 
     methods: { 
      enableEditing: function(){ 

       this.isEditing = true; 
      }, 

      editTodo: function(todo){ 
       // todo.todo = todo.todo.trim(); 
       this.isEditing = false; 
      }, 

      removeTodo: function(todo){ 
      //this.todos.$remove(todo); // --> This part is not working? 
      } 
     } 
    }); 

Однако, у меня есть данные, определенные в экземпляре приложения:

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

     methods: { 
      addTodo: function(){ 
       // This will not allow any empty items to be added. 
       if(this.newTodo.trim() == ''){ 
        return; 
       } 
       this.todos.push({ 
        todo: this.newTodo.trim(), 
        completed: false 
       }); 
       this.newTodo = '' 
      } 
     } 
    }); 

Я не могу удалить ни одного Todo из списка. Я предполагаю, что мне нужно отправить сообщение об ошибке в экземпляр приложения и разместить там слушателя, чтобы удалить данные из него? Как удалить данные?

Answer 1

Когда я попытался удалить, нажав кнопку x в вашем примере codePen, я вижу ошибку: this.$parent.todos.$remove не является функцией.

Я не заглянул глубоко в ваш код. Но попытка доступа к методам родительских компонентов с использованием this.$parent - не очень хорошая идея. Причина: компонент можно использовать в любом месте, и предполагая, что он будет иметь $ parent с определенным свойством или методом, является рискованным.

Как вы сказали в своем вопросе, для удаления данных необходимо использовать $emit из дочернего компонента.

Был еще один подобный вопрос здесь несколько дней назад, для чего я создал jsFiddle: https://jsfiddle.net/mani04/4kyzkgLu/

Компонент ребенок имеет некоторый код, как:

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

Это посылает событие для родительского компонента. Родительский компонент может подписаться на это событие, используя v-on, как показано в примере jsFiddle.

Вот что другой вопрос для справки: Delete a Vue child component

Answer 2

Это предпочтительнее использовать свои методы (DeleteTodo, EditTodo ...) в ваших родителях.

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>