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

Question

我的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？

Answer 1

为了按预期工作,您必须v-on:submit在表单标记上设置方法,并使用按钮/输入类型"提交".

另外,还要注意的事件修饰符prevent上@submit,它是一个shorcut到没有写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>