Vue-Validator表单验证不工作于JS Fiddle

Question

我想问一个关于vue-验证器的问题，但是它不适用于JSFiddle。有谁能帮我检查一下问题是什么，这样我就可以问主要问题了吗，请参阅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;
}

Answer 1

这里有两个问题。

1. 您为Vue-Validator使用的CDN (v2.1.7)似乎被破坏了。2.1.6和3.0.0-字母1的链接似乎很好。(这具体指的是cdnjs上的链接)
2. Vue-Validator 2.x只适用于Vue 1.x。您的CDN for Vue指向Vue 2.0.3。

所以，要么使用Vue 1.x和一个工作版本的Vue-Validator 2.x，要么使用Vue 2.x和Vue-Validator 3.x (目前在alpha中)。