4

我想验证我的公式不是通过 vue-formulate 输入类型提交而是通过另一个按钮。我的意思是,我有一个表单,其中包含 vue 公式,当我提交表单时,我想在发送数据之前检查我的 vue 公式。

这是一个例子

<template>
  <div class="eventForm">
    <el-form :model="event" label-position="top" ref="form" :rules="rules" :hide-required-asterisk="true" :disabled="formType=='view'?true:false">
      <!-- Input exemple for element form -->
      <el-form-item :label="$t('Event category')" prop="event_category" >
        <el-radio-group v-model="event.event_category">
          <el-radio-button 
            v-for="value in listOfEventCategory" 
            :key="value[0]"
            :label="value[0]"
            :value="value[0]">
            {{ value[1] }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!-- My other element form -->
      ... 
      <!-- Call of vue-formulate inputs through json -->
      <FormulateForm 
        v-model="event.data"
        :schema="event.template"
      />
      <!-- My button to save form -->
      <el-form-item class="lst-btn-end-form" v-if="formType!='view'">
        <el-button @click.stop="save('form')">{{ $t('Save') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Vuex from 'vuex'

export default {
  name: 'settingsEventForm',
  data () {
    return {
      headers: '',
      loading: false,
      contributors: [],
      formSchema: []
    }
  },
  computed: {
    ...Vuex.mapGetters(['event', 'listOfEventCategory'])
  },
  methods: {
    ...Vuex.mapActions({
      createEvent: 'createEvent',
      getListOfEventCategory: 'getListOfEventCategory',
    }),
    save (formName) {
      // Here I would like to call the function to verify if elements from vueformulate are valid
      ...
      // Then verify the other elements and save the form
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // Save my form
          this.createEvent(this.event)
        } else {
          this.$toast.open({
            message: this.$root.$t('check_data_entered'),
            type: 'is-danger'
          })
          return false
        }
      })
    },
  },
  mounted: function () {
    this.getListOfEventCategory()
  },
}
</script>

有可能做我想做的事吗?有人可以帮助我吗?

谢谢 !

4

0 回答 0