Почему vue не отображает содержимое и состояние объектов в списке? - PullRequest
Новая
       10

Почему vue не отображает содержимое и состояние объектов в списке?

0 голосов
/ 04 февраля 2019

Я пытаюсь создать приложение crud в vue.В настоящее время кажется, что создавать, редактировать и удалять объекты хорошо.Но это не показывает содержание и отражает состояние добавленных / существующих объектов.Редактирование элементов несколько раз также ведет себя странно.Можете ли вы помочь мне понять, почему?Как правильно отобразить контент?

Vue.component('todo-item', {
  template: '\
              <li>\
                <input type="checkbox" v-model="isChecked" />\
                <button v-on:click="$emit(\'remove\')">Delete</button>\
                <button v-on:click="$emit(\'edit\')">Edit</button>\
                {{ content }}\
              </li>\
            ',
  props: ['content', 'isChecked']
})
var app = new Vue({
  el: '#app',
  data: {
    "todo": {
      isChecked: true
    },
    "todos": [{
        id: 1,
        isChecked: true,
        content: "hahaha"
      },
      {
        id: 2,
        isChecked: false,
        content: "hohoho"
      }
    ],
    "counter": 3
  },
  methods: {
    addNewTodo: function() {
      if (this.todo.id != undefined) {
        this.todos.filter(t => t.id === this.todo.id).content = this.todo.content;
        this.todos.filter(t => t.id === this.todo.id).content = this.todo.isChecked;
      } else {
        this.todos.push({
          id: this.counter++,
          content: this.todo.content,
          isChecked: this.todo.isChecked
        })
      }
      this.clear();
    },
    edit: function(todo) {
      this.todo = todo;
      console.log(todo);
    },
    clear: function() {
      this.todo.content = '';
      this.todo.isChecked = true;
      this.todo.id = undefined;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form v-on:submit.prevent="addNewTodo">
    <input type="checkbox" id="checkbox" v-model="todo.isChecked" />
    <label for="checkbox">Done</label>
    <input v-model="todo.content" placeholder="edit me" />
    <button type="button" @click="clear">Clear</button>
  </form>
  <ul>
    <li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.content" v-on:remove="todos.splice(index, 1)" v-on:edit="edit(todo)"></li>
  </ul>
</div>
...