Vue.js复选框验证

时间:2020-03-20 16:08:51

标签: javascript validation vue.js error-handling frontend

enter image description here

您好,我一直在尝试进行此验证,但是我不知道可以将代码放在哪里。当我单击底部但一次时发生错误。而且它不会验证每个复选框

代码: 定制组 ----------------------->

<template>
  <div class="fresh">
    <div class="container" 
      :validationError="validationError" :value="value" @click="$emit('click')" 
      @input="$emit('input', $event.target.value)" :class="{ 'error': error}">
      <slot/>
    </div>
    <span class="error" v-if="error">
      <img src="@/assets/img/1x/error_icon.png">
      <p>{{error}}</p>
    </span>
  </div>
</template>

<script>
export default {
  name: 'CustomGroupModalidades',
  props: ['value','validationError'],
  mounted : { 


  },
  methods: {

    },
    // Compatibilidad con Safari, por alguna razon no captura el evento 'input'

  }

</script>

<style scoped>

--------------------------------------------------------------------------------

 <wrap-container>
          <section-label value="Elegí las modalidades " />
          <custom-group-modalidades :required="true">
            <check-item id="Checkbox1" v-model="model.modalidadPosnet.tarjeta" label="Tarjeta"></check-item>
            <check-item
              id="Checkbox2"
              v-model="model.modalidadPosnet.ventaTelefonica"
              label="Venta telefónica" 
            ></check-item> 
            <check-item id="Checkbox3" v-model="model.modalidadPosnet.eCommerce" label="E-commerce"></check-item>
            <check-item 
              id="Checkbox4"
              v-model="model.modalidadPosnet.debitoAutomatico"
              label="Débito automático"
            ></check-item>
          </custom-group-modalidades>
        </wrap-container>
        <div class="relative-container">
          <step-navigator :store-action="this.doNext" />
        </div>
      </form-validator>
    </wrap-container>

0 个答案:

没有答案