vue.js - VueJs: リスト内のフォーム入力と ID を動的に構築する

Question

フォームからリスト項目を追加して、VueJs を使用してリストを作成しています。メイン リスト アイテムのサブアイテムとなるメモも追加したいと考えています。主要なリスト項目を問題なく追加できます。サブ項目を追加しようとすると、サブ項目のすべての入力フィールドが、最初に追加ボタンを押す前に入力したデータに応答します。これは、IDを入力に動的に割り当てる方法と関係があると思います。そして、送信ボタンを押した後、メモがサブアイテムのリストに追加されません。私は理由を理解できないようです:私は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;
}