Vue/Laravel 如何将表单从刀片传递到 vue 以使用 checkValidity答案

【问题标题】：Vue/Laravel How to pass form from blade to vue to use checkValidityVue/Laravel 如何将表单从刀片传递到 vue 以使用 checkValidity
【发布时间】：2018-06-25 07:05:09
【问题描述】：

由vue制作的以下按钮（单组件）。

<template>
  <div>
    <input type="submit" class="button_orange button_big" value="Register" v-show="!isSubmitting" @click="startSubmit">
    <div class="button_disable button_big" v-show="isSubmitting">Register</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isSubmitting: false,
      };
    },
    methods: {
      startSubmit() {
        if (form.checkValidity()) {
          this.isSubmitting = true;
        }
      },
      reset() {
        this.isSubmitting = false;
      },
    },
  };
</script>

当前的问题是如何将表单传递给 vue 以使用 checkValidity() 方法。 laravel Blade 是以下类型的源代码。如果有想法如何将表单从刀片传递到 vue，请帮助。

<form>
  <input type="text" name="test">
  <submit-button></submit-button>
</form>

【问题讨论】：

标签： laravel laravel-5 vue.js vuejs2 vue-component

【解决方案1】：

这有什么问题？

document.querySelector("form").checkValidity()

（当然，这需要将其作为页面上唯一的表单，因此，如果可以，您应该在表单上有一个 ID，并改为使用 document.querySelector("#myForm01").checkValidity() 之类的东西。）

【讨论】：

感谢您的建议。关于我们从vue访问form的方式，我们只有使用DOM访问的方式吗？
绝对不是。在表单标签中使用 ref="myForm" ，然后在 Vue 方法中你可以使用 this.$refs.myForm 来引用表单