vee 验证自定义 select2 组件不起作用答案

【问题标题】：vee validate on custom select2 component not worksvee 验证自定义 select2 组件不起作用
【发布时间】：2017-11-07 13:52:24
【问题描述】：

我尝试在自定义组件上使用 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!')
        })
    }
  }
});

这是我创造的一支笔

https://codepen.io/anon/pen/gXwoQX?editors=1111

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

【问题讨论】：

标签： vuejs2 custom-component vee-validate

【解决方案1】：

在 github - #590、#592 中提出了关于此主题的问题。

他们都没有引导我找到解决方案，所以我建议在承诺中进行检查

.then(response => {
  if(this.errors.items.length === 0) {
    alert('is valid')
  } else {
    alert('is not valid')
  }

其他几点说明：

见下文，catch() 在技术上是处理 validation 错误的错误位置，它应该在 then(response) 内并且当 response === false 无效时（但不是由于错误而工作）。

catch() 可能是因为“我炸毁了”错误。

.catch(function(e) {
  // Catch errors
  // alert('not valid')  // don't process these here
})

还有这个

v-validate="'required|in:sick, vacation'"

应该是这个（假期前去掉空格）

v-validate="'required|in:sick,vacation'"

【讨论】：