我正在尝试使用 vee-validate 制作一个简单的表单验证页面。虽然有些东西似乎坏了，但我不确定我到底做错了什么。
span 标签显示为原始 html:
标记:
<!DOCTYPE html>
<html>
<head>
<script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
</head>
<body>
<script type='text/JavaScript'>
Vue.use(VeeValidate); // good to go.
new Vue({
el: '#app',
data: {
email_primary: null
}
});
</script>
<div id="app">
<form action='#' method='POST'>
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
</body>
</html>
Fiddle .
我需要做什么才能使 vee-validate 按预期工作？
最佳答案
问题
似乎有几件事，但罪魁祸首是所有脚本标签上的 type 属性都设置为无效的 text/JavaScript。最好不要设置类型，或者如果您设置了类型，请将其设置为 text/javascript。
此外，由于您将 div#app 用作模板而不仅仅是根元素，因此我添加了适当的属性。
最后，始终在您的 html 之后加载您的 javascript。
固定代码
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<form action='#' method='POST'>
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
<script>
Vue.use(VeeValidate); // good to go.
new Vue({
el: "#app",
template: '#app',
data() {
return {
email_primary: null
};
}
});
</script>
</body>
</html>还有一个 working jsfiddle .
希望对您有所帮助!
关于vue.js - vee-validate 不工作的基本示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50937277/