vee-validate 的基本示例不起作用答案

【问题标题】：Basic example with vee-validate not workingvee-validate 的基本示例不起作用
【发布时间】：2018-06-19 21:36:30
【问题描述】：

我正在尝试使用 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 验证按预期工作？

【问题讨论】：

标签： vue.js vee-validate

【解决方案1】：

问题

这似乎是一些事情，但主要的罪魁祸首是所有脚本标签上的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。

我希望这会有所帮助！

【讨论】：

非常感谢，这让我指出了正确的方向。你能解释一下吗：div#app as a template rather than just the root element。根元素是什么意思？有没有更好的编码方式？
@acoder 通常，您会构建它，以便您的所有组件都在自己的文件中自包含 - 包括 HTML、CSS 和 vue 逻辑。一个很好的启动工具是vue-cli。它将为您提供一个带有示例逻辑的新项目，以便您了解它
你上面描述的（一个带有专用表单验证的文件）是我正在寻找的（我正在使用 Bulma html 框架 fwiw）。显然，我是 vee-validate 的新手，所以这很有帮助。
再次感谢您的回答，刚刚实现和功能，并且看起来非常适合 Bulma。
刚刚为 Bulma 找到了类似的 UI 扩展：buefy.github.io