Framework 7 vue，验证成功

Question

使用 framework 7 vue（当前版本 4.4.3），我试图在提交时验证表单。我找到了以下代码：http://forum.framework7.io/t/solved-how-to-validate-form-using-button-v2/1889

  $$('.save').on('click', function(e){
  e.preventDefault();
  if (!$$('#form-name')[0].checkValidity()) {

    console.log('Check Validity!');

  } else {

    //ajax request here
    return false;

  }

});

但是，我在尝试将其转换为在 vue 中工作时遇到了困难。注销表单对象，我看不到 checkValidity 选项...

我已经能够通过

访问表单数据

 const formData = this.$f7.form.convertToData('#ajaxForm')

我正在使用 framework7 的输入

<f7-list >
  <f7-list-input v-for="field in form"
    :name="field.name"
    :value="field.value"
    @input="field.value = $event.target.value"
    :label="field.label"
    :type="field.type"
    :placeholder="field.placeholder"
    :info="field.info"
    :required="field.required"
    :validate="field.validate"
    clear-button
  >
  </f7-list-input>
</f7-list>

验证也可以通过道具进行...只是无法理解如何在提交时触发它。我假设我需要按照示例访问框架 7 的 dom？ - 我试图访问 Dom7 - 但这是未定义的...我猜是因为正在使用 vue？

Answer 1

所以.... Dom7 可用作 this.Dom7.... checkValidity 方法可用。感觉有点像jQuery :)

 const $$ = this.Dom7

      if (!$$('#ajaxForm')[0].checkValidity()) {

        console.log('Check Validity!');

      } else {

        //ajax request here
        return false;

      }

Framework 7 vue，验证成功

Framework 7 vue, validate on success

javascript

vue.js

html-framework-7