Question

我找到一个我分叉然后编辑的jsfiddle示例。我不知道发生了什么或如何解决。在我的示例中，我使用的是带有值的复选框，但是当我单击一个复选框时，根据是否单击该复选框，该值将更改为true或false。

const Checkboxes = {
	template: '#checkboxTmpl',
  data() {
  	return {
    	text: '',
    	options: [
      	{
        	name: 'Web',
        	slug: 'web'
        },
        {
        	name: 'iOS',
        	slug: 'ios'
        },
        {
        	name: 'Android',
        	slug: 'android'
        }
      ]
    };
  },
  created() {
  	this.$validator.extend('oneChecked', {
        getMessage: field => 'At least one ' + field + ' needs to be checked.',
        validate: (value, [testProp]) => {
          const options = this.options;
          // console.log('questions', value, testProp, options.some((option) => option[testProp]));
          return value || options.some((option) => option[testProp]);
        }
      });
  },
  methods: {
  	validateBeforeSubmit(e) {
      this.$validator.validateAll(); // why is oneChecked not validated here? --> manually trigger validate below
      this.options.forEach((option) => {
      	this.$validator.validate('platforms', option.slug, ['checked'])
      });
      
      console.log('validator', this.errors);
      if (!this.errors.any()) {
          alert('succesfully submitted!');
      } 
    }
  }
};

Vue.use(VeeValidate);

const app = new Vue({
	el: '#app',
  render: (h) => h(Checkboxes)
})

<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.18/vee-validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"></script>
<div id="app">

</div>

<script id="checkboxTmpl" type="text/template">
	<form @submit.prevent="validateBeforeSubmit">
  
 		<label v-for="(option, index) in options">
    	<input type="checkbox" 
      	v-model="option.slug"
        name="platform"
        v-validate.initial="option.slug"
        data-vv-rules="oneChecked:checked" 
        data-vv-as="platform"/> {{option.name}}
    </label>

    <p v-show="errors.has('platform')">{{ errors.first('platform') }}</p>
    
    <pre>{{options}}</pre>
    
    <button type="submit">Submit</button>
  </form>
</script>

我不明白为什么所有复选框都被选中，并且即使仍选中了两个复选框，取消选中其中一个也会返回验证错误。我喜欢在提交表单之前显示错误，但是取消选中所有复选框然后提交不会触发验证错误。

我正在使用VeeValidate，因为该示例使用的是VeeValidate，但任何其他解决方案都可以。我不想在我的vue.js应用程序中使用jQuery。

我真的很想了解发生了什么事。

Answer 1

有两个主要问题：

在错误的密钥上使用v-model。实际上，每次复选框被选中或未选中时，它都会发出一个输入事件，该事件将修改该选项的原始段（在您的data中）。相反，您需要在选项中添加一个checked字段。然后在模板中添加:checked属性，并将v-model修改为:option.checked。
正如VeeValidate的文档所述，您可以使用required规则来确保必须选中复选框以提交表单。这是文档的link。因此，您不需要created块。

此外，validateAll函数还返回一个包含验证结果的promise。因此也无需使用this.errors.any()。

此外，当您使用Beta时，我将VeeValidate库升级到了最新版本。

这是工作代码：

const Checkboxes = {
  template: '#checkboxTmpl',
  data() {
    return {
      text: '',
      options: [{
          name: 'Web',
          slug: 'web',
          checked: false
        },
        {
          name: 'iOS',
          slug: 'ios',
          checked: true
        },
        {
          name: 'Android',
          slug: 'android',
          checked: true
        }
      ]
    };
  },
  methods: {
    validateBeforeSubmit(e) {
      this.$validator.validateAll().then(value => {
        if (value) {
          alert('successfully submitted')
        }
      })
    }
  }
};

Vue.use(VeeValidate);

const app = new Vue({
  el: '#app',
  render: (h) => h(Checkboxes)
})

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"></script>
<script src="https://unpkg.com/vee-validate@latest"></script>

<script id="checkboxTmpl" type="text/template">
  <form @submit.prevent="validateBeforeSubmit">

    <label v-for="(option, index) in options">
    	<input type="checkbox"
      	:checked="option.checked"
        v-model="option.checked"
        name="platform"
        v-validate="'required'"/> {{option.name}}
    </label>

    <p v-show="errors.has('platform')">{{ errors.first('platform') }}</p>

    <pre>{{options}}</pre>

    <button type="submit">Submit</button>
  </form>
</script>

希望有帮助！

我正在尝试实施VeeValidate，以检查是否至少选中了一个复选框

1 个答案: