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方法，并使用按钮/输入类型＆＃34;提交＆＃34;。

另外，请注意prevent上的事件修饰符@submit，这不需要在方法上写e.preventDefault()

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: