Question

我试图在VueJs中复制TODO MVC。（请查看此codepen：http://codepen.io/sankalpsingha/pen/gwymJg）我创建了一个名为＆＃39; todo-list＆＃39;使用以下代码：

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?
            }
        }
    });

但是，我在app实例中定义了数据：

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。我的猜测是我必须向应用实例发送一个emit消息并在那里放一个监听器来删除它的数据？如何删除数据？

Answer 1

当我尝试通过点击codePen示例中的x按钮进行删除时，我看到错误：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>

将数据发送到VueJs中的非父组件

2 个答案: