javascript - Vue-Validator 表单验证不适用于 JS Fiddle

Question

我想问一个有关 vue-validator 的问题，但它在 JSFiddle 上不起作用。有人可以帮我检查一下问题是什么，以便我可以继续提出主要问题 See 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 (v2.1.7) 的 CDN 似乎已损坏。 2.1.6 和 3.0.0-alpha1 的链接似乎没问题。 (这里特指cdnjs上的链接)

2. Vue-Validator 2.x 仅适用于 Vue 1.x。您的 Vue CDN 指向 Vue 2.0.3。

因此，要么使用 Vue 1.x 和 Vue-Validator 2.x 的工作版本，要么使用 Vue 2.x 和 Vue-Validator 3.x(目前处于 alpha 版本)。