Vue，如何从组件调用数据

Question

我正在尝试从我的 Vue 数据中删除一行：todos，但我的方法在组件中。第二个问题是我无法修复，如果我的输入被检查了怎么办？我的方法切换返回或是否被选中，但我无法在我的模板上设置它。下面是代码：

Vue.component('todoList', {
  props: ['todoObj'],
  template: '<tr>' +
  '<td>{{todoObj.description}}</td>' +
  '<input type="checkbox" v-on:click="toggle"/>' +
  '<button v-on:click="deleteTodo">delete</button>' +
  '</tr>',
  methods: {
    toggle: function () {
        axios.post('/todo/toggleTodo', {
            'todoId': this.todoObj.id
        }).then(function (response) {
            Here will be code... I have to set to my checbox or is checked or not. This response return "yes" or "no"
        });
    },
    deleteTodo: function () {
        axios.post('/todo/deleteTodo', {
            'todoId': this.todoObj.id
        }).then(function (response) {
            console.log(response); <- here i don't know how to delete my row from table from Vue data: todos
        });

    }
}
});

这是我的休息代码：

var app = new Vue({
el: '#appTest',
data: {
    todos: [],
    todoText: ''

},
methods: {
    addTodo: function () {
        var self = this;

        axios.post('/todo/addTodo', {
            'newTodo': this.todoText
        }).then(function (response) {
            console.log(response);
            self.todos.unshift({
                    'id': response.data.id,
                    'description': response.data.description,
                    'done': response.data.done
                }
            );
            self.todoText = '';

        }).catch(function (error) {
            var errors = error.response.data.description[0];
            console.log(errors);
            self.error = errors;

        });


    },
    toggle: function () {
        console.log('toggle?');
    }
},
created: function () {
    var self = this;
    axios.get('/todo').then(function (response) {
            console.log(response.data);
            self.todos = response.data;
        }
    );

}
});

Answer 1

这是一个示例，展示了您的 todo-list 组件的外观。

Vue.component('todoList', {
  props: ['todoObj'],
  template: `<tr>
              <td>{{todoObj.description}}</td>
              <input type="checkbox" v-model="todoObj.done" @click="toggle"/>
              <button @click="deleteTodo">delete</button>
            </tr>`,

  methods: {
    toggle() {
      axios.post('/todo/toggleTodo', {
        todoId: this.todoObj.id
      })
      .then(response => {
        let isChecked = response.data == 'yes'
        this.$emit('update:todoObj', Object.assign(this.todoObj, {done: isChecked}))
      })
    },

    deleteTodo() {
      axios.post('/todo/deleteTodo', {
        todoId: this.todoObj.id
      })
      .then(response => {
        this.$emit('delete', this.todoObj)
      })
    }
  }
})

你的主 Vue 模板应该有这个：

<todo-list v-for="todo in todos" :todoObj.sync="todo" @delete="deleteTodo"></todo-list>

vue 实例应该是这样的：

var app = new Vue({
  el: '#appTest',

  data: {
    todos: [],
    todoText: '',
  },

  methods: {
    addTodo() {
      axios.post('/todo/addTodo', {
        'newTodo': this.todoText
      })
      .then(response => {
        let todo = response.data
        this.todos.push(todo)
        this.todoText = ''
      })
      .catch(error => {
        let errors = error.response.data.description[0]
        this.error = errors
      })
    },
    deleteTodo(todo) {
      console.log('Should delete this todo: ', todo)
    },
  },

  created() {
    axios.get('/todo')
    .then(response => {
      this.todos = response.data
    })
  }
})