1
vue-validatorに関する質問をしたいが、JSFiddleでは機能していない。誰かが私には問題は私が先に行くと、主な質問をすることができるように See JSFiddleVue-Validatorフォームの検証がJS Fiddleで機能しない
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="[email protected]{{note.id}}" type="text" class="form-control" name="[email protected]{{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;
}