VueJs：在列表中动态构建表单输入和ID

Question

我正在使用VueJs通过表单添加列表项来构建列表。我还想添加注释作为主要列表项的子项。我可以添加主要列表项没有问题： 当我尝试添加子项时，子项的所有输入字段都会在我第一次按下添加按钮之前响应我输入的数据。我猜这应该如何动态地将Ids分配给输入。按下提交按钮后，它不会将注释添加到子项列表中。我似乎无法弄清楚原因： 我添加了JsFiddle

HTML

<div id="app">
    <form v-on:submit.prevent="addInstance()">
        <div class="form-group">
            <input id="eventtext" type="text" class="form-control" placeholder="Enter new Instance" v-model="todo.name">
            <button><i class="fa fa-plus"> Add Instance</i></button>
        </div>
    </form>
    <div class="">
        <div v-for="todo in todoStore" class="list-group">
            <div class="list-group-item">
                <h4>
                    Main Card
                </h4> {{todo.name}}
            </div>
            <div class="list-group-item nopadding">
                <button class="btn btn-xs btn-danger margin-10" v-on:click="todoDelete(todo)">
                    <i class=" fa fa-trash"></i>
                </button>
            </div>
            <div v-for="note in todoNoteStore" class="list-group nopadding nomargin">
                <div v-if="todo.id == note.card_id">
                    <div class="list-group-item">
                        <h4>
                            Note fore card {{todo.id}}
                        </h4> {{note.card_id}}
                    </div>
                    <div class="list-group-item  nopadding">
                        <button class="btn btn-xs btn-danger margin-10" v-on:click="removeNoteInstance(note)">
                            <i class=" fa fa-trash"></i>
                        </button>
                        <form v-on:submit.prevent="addNoteInstance()">
                            <div class="form-group">
                                <input id="noteCount=noteCount+1" type="text" class="form-control"
                                       placeholder="Enter new Note Instance" v-model="todoNote.name">

                                <button><i class="fa fa-plus"> Add Note Instance</i></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

的js

new Vue({
   el: '#app',
   data: function() {
     return {

       todo: {
         id: 1,
         name: '',
         completed: false,
         check: ''
       },
       todoNote: {
         id: 1,
         name: '',
         completed: false,
         check: ''
       },

       todoStore: [{
           id: 1,
           name: 'White',
           completed: true,
           check: 'This is from card 1'
         },

         {
           id: 2,
           name: 'Balack',
           completed: true,
           check: 'This is from card 2'
         }
       ],
       todoNoteStore: [{
           id: 1,
           card_id: 2,
           name: 'White',
           event3: 'Heisenberg',
           completed: true,
           check: 'This is from note 1'
         },

         {
           id: 2,
           card_id: 1,
           name: 'Yelloe',
           event3: 'Green',
           completed: true,
           check: 'This is from note 2'
         }
       ]

     }
   },
   methods: {
     addInstance: function() {
       this.todoStore.push(this.todo);
       this.todo = {};
     },

     addNoteInstance: function() {
       this.todoNoteStore.push(this.todoNote);
       this.todoNote = {};
     },

     removeNoteInstance: function(note) {
       this.todoNoteStore.remove(note);
     }

   }
 });

CSS

.nopadding {
  padding-top: 0px;
  !important;
  padding-bottom: 0px;
  !important;
}

.nomargin {
  margin: 0px;
}