I'm having trouble with vue-validator on JSFiddle. Can someone please assist in troubleshooting the issue so I can proceed with my main question? Check out JSFiddle
Html:
<div id="app">
<validator name="instanceForm">
<form v-on:submit.prevent="addInstance()">
<div class="form-group">
<input id="'instancetext" type="text" class="form-control" placeholder="Enter new Instance" v-validate:instancetext="{ required: { rule: true, message: 'What is the instance ?'}}" v-model="todo.name">
<div class="errors" v-if="showErrors">
<span v-if="$instanceForm.instancetext.required">{{$instanceForm.instancetext.required}}</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-default"> <i class="fa fa-plus"> </i> Add
</button>
</div>
</form>
</validator>
<div class="">
<div v-for="todo in todoStore" class="list-group">
<div class="list-group-item">
<h4>
Main Card
</h4> {{todo.name}} {{todo.id}}
</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>
<form @submit="addNoteInstance">
<div class="form-group">
<input id="note-@{{note.id}}" type="text" class="form-control" name="note-@{{note.id}}" placeholder="Enter new Note Instance" v-model="name">
<button type="submit"><i class="fa fa-plus"> Add Note Instance</i></button>
</div>
</form>
</div>
<div v-for="note in todoNoteStore" class="list-group nopadding nomargin">
<div v-if="todo.id == note.id">
<div class="list-group-item">
<h4>
Note fore card {{todo.id}}
</h4> {{note.id}}{{note.name}}
</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>
</div>
</div>
</div>
</div>
</div>
<pre>{{ $data | json }}</pre>
</div>
Js:
new Vue({
el: '#app',
data: function() {
return {
showErrors: false,
todo: {
id: 1,
name: '',
completed: false,
check: ''
},
todoNote: {
id: 1,
name: '',
completed: false,
check: ''
},
todoStore: [
],
todoNoteStore: [
]
}
},
methods: {
addInstance: function() {
if (this.$instanceForm.valid) {
this.todoStore.push(this.todo);
this.todo = {};
this.showErrors = false;
} else {
this.showErrors = true;
}
},
addNoteInstance: function(e) {
e.preventDefault();
this.todoNoteStore.push({
"id": 1,
"name": this.name,
"completed": false,
"check": ''
});
this.name = '';
},
removeNoteInstance: function(note) {
this.todoNoteStore.remove(note);
}
}
});
css:
.nopadding {
padding-top: 0px;
!important;
padding-bottom: 0px;
!important;
}
.nomargin {
margin: 0px;
}