导入 Vuelidate 库的问题

Question

作为实施表单验证的一部分，我想在 Sails.js 页面中使用 Vuelidate 库。页面使用这个webpage.page.js:

获取Vue代码

import Vuelidate from 'vuelidate'

parasails.registerPage('web-page', {
    data: {
        message: '',
        class: ''
    },
    validations: {
       // For Vuelidate
       message: {
         required,
       },
       class: {
         required,
       },
    }, 
});

，链接到此 webpage.ejs 查看模板：

<div id="web-page">
  <div class="container d-flex-column justify-content-center">
        <div class="heading-container">
            <p class="h2">Heading</p>
        </div>
        <form action="/someaction" method="post">
            <div class="form-group" :class="{ 'form-group--error': $v.name.$error }">
                <label 
                      for="name" class="form__label">Name</label>
                <input
                      type="text"
                      class="form__input"
                      name="name"
                      v-model.trim="$v.name.$model"/>
            </div>
           <div class="error" v-if="!$v.name.required">Field is required</div>
           <div class="form-group" :class="{ 'form-group--error': $v.class.$error }">
                <label for="class" class="form__label">Class</label>
                 <input
                      type="text"
                      class="form__input"
                      name="class"
                      v-model.trim="$v.class.$model"/>
           </div>
           <div class="error" v-if="!$v.class.required">Field is required</div>
           <button class="btn btn-success text-white" type="submit">Save</button>
        </form>
    </div>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>

这给出了一个错误 'Cannot use import statement outside a module'。我安装了 Vuelidate npm 包。因此，我如何导入 Vuelidate 库才能使其正常工作？

Answer 1

如果您使用的是 Sails web 模板，则需要将 Vuelidate dist 文件 validators.min.js 和 vuelidate.min.js 导入到 assets/dependencies 文件夹中。之后，Grunt 导入文件，您将能够在没有 import 的情况下全局使用它们，因为它们将在浏览器中可用。

检查文档部分 The browser-ready bundle is also provided in the package.:

https://vuelidate.js.org/#sub-basic-usage

导入 Vuelidate 库的问题

Issues with importing Vuelidate Library

javascript

sails.js

vuelidate