Базовый пример с неработающим vee-validate
Я пытаюсь заставить простую страницу проверки формы работать с 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>
Что мне нужно сделать, чтобы vee-validate работал должным образом?
Ответы 1
Проблемы)
Похоже, было несколько вещей, но главным виновником было то, что атрибут type во всех тегах скрипта был установлен на text/JavaScript, что недопустимо. Лучше либо не устанавливать тип, либо, если вы это сделаете, установить его на text/javascript.
Кроме того, поскольку вы используете div#app в качестве шаблона, а не просто корневого элемента, я добавил соответствующие атрибуты.
Наконец, всегда загружайте свой javascript после свой html.
Фиксированный код
<!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>Также файл рабочий jsfiddle.
Надеюсь, это поможет!
@acoder, как правило, вы бы построили его так, чтобы все ваши компоненты были автономными в своем собственном файле, включая HTML, CSS и логику vue. vue-cli - отличный инструмент для начала. Он создаст для вас новый проект с примерами логики, чтобы вы могли прочувствовать его.
То, что вы описали выше (один файл со специальной проверкой формы), - это то, что я ищу (я использую Bulma html framework fwiw). Ясно, что я новичок в vee-validate, так что это полезно.
Еще раз спасибо за ответ, только что реализованный и функционирующий и очень хорошо выглядит с Bulma.
Нет проблем, я рад, что смог помочь!
sidenote, Еще одна отличная библиотека пользовательского интерфейса, если вы ее ищете, это Vuetify: vuetifyjs.com/en
Только что нашел подобное расширение пользовательского интерфейса для Bulma: buefy.github.io
вы знаете, как использовать vee-validate с базовым раскрывающимся списком?
Большое спасибо, это направило меня в правильном направлении. Не могли бы вы немного объяснить по этому поводу:
div#app as a template rather than just the root element. Что вы подразумеваете под корневым элементом? Есть ли лучший способ закодировать это?