1

我正在使用 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;
}
4

0 回答 0