javascript - 如何在vue组件中显示所需的html 5？

我的Vue组件是这样的:

<template>
    <div>
        ...
        <form class="form-horizontal" id="form-profile">
            ...
            <input type="number" class="form-control" required>
            ...
            <button type="submit" class="btn btn-primary" @click="submit">Submit</button>
            ...
        </form>
        ...
    </div>
</template>
<script>
    export default {
        ...
        methods: {
            submit(e) {
                e.preventDefault()
                if (this.checkForm()) {
                    // do ajax here
                }
            },
            checkForm() {
                let field = true
                $('#form-profile :required').each(function(i) {
                    if(this.checkValidity() == false)
                        field = false
                })
                return field
            },
        }
    }
</script>

我使用所需的html5进行验证

我使用e.preventDefault()来防止页面重定向。因为我想使用ajax

我的问题是所需的验证html5如果未填写则不显示。也许是因为我使用了e.preventDefault()
如何显示所需的html5？

最佳答案

为了按预期工作，您必须在form标签上设置v-on:submit方法，并具有按钮/输入类型“submit”。

另外，请注意prevent上的事件修饰符@submit，不必在方法上编写e.preventDefault()是一种捷径

new Vue({
  el: '#app',
  data() {
    return {
      myText: ''
    }
  },
  methods: {
    submitForm() {
      alert('submited: ' + this.myText)
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>


<div id="app">
  <form @submit.prevent="submitForm">
    <input type="text" v-model="myText" required />
    <button type="submit">Submit</button>
  </form>
</div>