在类星体框架中提交不工作的外部表格

Question

我正在使用此示例提交表单 https://quasar.dev/vue-components/form 当我将按钮 div 放在 q-form 之外时，提交和验证不起作用

<div>
    <q-btn label="Submit" type="submit" color="primary"/>
    <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
  </div>

有帮助吗？

Answer 1

您可以使用ref然后调用validate()方法进行验证。

<div id="q-app">
  <div class="q-pa-md" style="max-width: 400px">

      <q-form
        ref="myForm"
        class="q-gutter-md"
      >
        <q-input
          filled
          v-model="name"
          label="Your name *"
          hint="Name and surname"
          lazy-rules
          :rules="[ val => val && val.length > 0 || 'Please type something']"
        ></q-input>

        <q-input
          filled
          type="number"
          v-model="age"
          label="Your age *"
          lazy-rules
          :rules="[
            val => val !== null && val !== '' || 'Please type your age',
            val => val > 0 && val < 100 || 'Please type a real age'
          ]"
        ></q-input>

        <q-toggle v-model="accept" label="I accept the license and terms" ></q-toggle>


      </q-form>
     <div>
          <q-btn @click="onSubmit" color="primary">Submit</q-btn>
          <q-btn @click="onReset" flat class="q-ml-sm" >Reset</q-btn>
        </div>
    </div>
</div>




 methods: {
    onSubmit () {
      let vm = this;
      this.$refs.myForm.validate()
    .then(success => {
        vm.$q.notify({
          color: 'red-5',
          textColor: 'white',
          icon: 'warning',
          message: 'You need to accept the license and terms first'
        })
    })
    .catch(err => {

        vm.$q.notify({
          color: 'green-4',
          textColor: 'white',
          icon: 'cloud_done',
          message: 'Submitted'
        })
    })

    },

    onReset () {
      this.name = null
      this.age = null
      this.accept = false
    }
  }

使用 this.$refs.myForm.resetValidation(); 进行重置验证。工作版本 - https://codepen.io/Pratik__007/pen/ExajNEq?editors=1010

在类星体框架中提交不工作的外部表格

submit not working outside form in quasar framework

vue.js

quasar-framework