Vuejs2 自定义select2组件上的vee验证不起作用

我尝试在自定义组件上使用vee validate，如果提交时未选择任何内容，则应显示验证错误

模板如下所示

<div id="validate" class="container">
  <form @submit.prevent="store()" data-vv-scope="time-off" autocomplete="off">
    <div class="col-lg-6">
      <div class="form-group">
        <select2 
                 :options="options" 
                 placeholder='Select...'
                 v-validate="'required|in:sick, vacation'" 
                 v-model="form.category"
                 id="categorywidget"
                 class="form-control">
        </select2>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary pull-right">
          Send Request
        </button>
      </div>
    </div>
    </div>
  </form>
</div>

发送请求

这是我的vue代码

Vue.component('Select2', {
  props: ['options', 'value', 'id', 'placeholder', 'clear'],
  template: '<select><slot></slot></select>',
  mounted: function () {
    var vm = this
    $(this.$el)
      .select2({
      data: this.options,
      placeholder: this.placeholder,
      theme: "bootstrap",
      width: '100% !important',
      dropdownAutoWidth : true,
      allowClear: this.clear !== '' ? this.clear : false
    })
      .val(this.value)
      .attr("id", this.id !== null ? this.id : Date.now() + Math.random() )
      .trigger('change')
    // emit event on change.
      .on('change', function () {
      vm.$emit('input', $(this).val())
    })
  },
  watch: {
    value: function (value) {
      // update value
      $(this.$el).val(value).trigger('change');
    },
    options: function (options) {
      // update options
      $(this.$el).select2({data: options})
    }
  },
  destroyed: function () {
    $(this.$el).off().select2('destroy')
  }
});

Vue.use(VeeValidate)


new Vue({
  el: '#validate',
  data: {
    form: {
      scopes: [],
      category: 'null',
      daterange: '',
      note: ''
    },

    options: [
      {text: 'Vacation', id: 'vacation'},
      {text: 'Sick', id: 'sick'},
      {text: 'Not ok', id: 'not-ok'},
    ]
  },

  methods: {
    store: function() {
      this.$validator
        .validateAll()
        .then(function(response) {
            alert('is ok!')
          // Validation success if response === true
        })
        .catch(function(e) {
          // Catch errors
          alert('not ok!')
        })
    }
  }
});

Vue.component（'Select2'{
道具：[“选项”、“值”、“id”、“占位符”、“清除”]，
模板：“”，
挂载：函数（）{
var vm=这个
$（此。$el）
.选择2({
数据：这是一个选项，
占位符：this.placeholder，
主题：“引导”，
宽度：“100%！重要”，
dropdownAutoWidth:true，
allowClear:this.clear！=''？this.clear:false
})
.val（此.value）
.attr（“id”，this.id！==null？this.id:Date.now（）+Math.random（））
.trigger（'更改'）
//在更改时发出事件。
.on（'change'，function（）{
vm.$emit（'input'，$（this.val（））
})
},
观察：{
值：函数（值）{
//更新值
$（this.$el）.val（value）.trigger（'change'）；
},
选项：功能（选项）{
//更新选项
$（this.$el）。选择2（{data:options}）
}
},
已销毁：函数（）{
$（this.$el）.off（）。选择2（'destroy'）
}
});
Vue.use（VeeValidate）
新Vue({
el:“#验证”，
数据：{
表格：{
范围：[]，
类别：“空”，
日期范围：“”，
注意：“”
},
选项：[
{text:'Vacation'，id:'Vacation'}，
{text:'Sick'，id:'Sick'}，
{text:'不正常'，id:'不正常'}，
]
},
方法：{
存储：函数（）{
这是$validator
.validateAll（）
.然后（功能（响应）{
警报（'正常！'）
//如果响应===true，则验证成功
})
.catch（函数（e）{
//捕捉错误
警报（'不正常！'）
})
}
}
});

这是我创作的一支钢笔

---

提交null时，验证通过。这段代码有什么问题

github-中提出了关于这一主题的问题

没有一个能让我找到解决方案，所以我建议在承诺的范围内进行检查

。然后（响应=>{
if（this.errors.items.length==0）{
警报（'有效'）
}否则{
警报（'无效'）
}

还有一些其他注意事项：

如下所示，

catch（）

在技术上是处理验证错误的错误位置，应该在

then（response）

中，当

response===false时（但由于错误而无法工作）

catch（）
可能是针对“我爆炸了”错误的

.catch（函数（e）{
//捕捉错误
//警报（'not valid'）//不要在这里处理这些
})

还有这个

v-validate=“'required | in:生病，休假”

应该是这样的（在假期前删除空间）

v-validate=“'required | in:生病，休假”