时间戳

首页 > 解决方案 > 使用带有模式的 Vue 公式

vue.js - 使用带有模式的 Vue 公式

问题描述

我试图让 Vue Formulate 运行，但它不起作用。这是我的代码：

此版本包括导入语句： https ://vueformulate.com/guide/installation/#direct-download

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.4.1/dist/formulate.umd.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015"></script>

<template>
  <FormulateForm
    v-model="values"
    :schema="schema"
  />
</template>

<script>

import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'

Vue.use(VueFormulate)

export default {
  data () {
    return {
      values: {},
      schema: [
        {
          type: 'password',
          name: 'password',
          label: 'Enter a new password',
          validation: 'required'
        },
        {
          type: 'password',
          name: 'password_confirm',
          label: 'Confirm your password',
          validation: '^required|confirm:password',
          validationName: 'Password confirmation'
        },
        {
          type: 'submit',
          label: 'Change password'
        }
      ]
    }
  }
}
</script>

打开站点会导致控制台中出现以下错误：

formulate.umd.min.js:5 Uncaught TypeError: Cannot read property 'en' of undefined
    at new Jt (formulate.umd.min.js:5)
    at formulate.umd.min.js:5
    at formulate.umd.min.js:5
    at formulate.umd.min.js:5
Jt @ formulate.umd.min.js:5
(anonymous) @ formulate.umd.min.js:5
(anonymous) @ formulate.umd.min.js:5
(anonymous) @ formulate.umd.min.js:5
test.html:15 Uncaught SyntaxError: Unexpected token 'export'

谢谢！

标签： vue.jstemplatesschemavue-formulate

解决方案

该问题部分归因于 DOM 限制，正如Vue Formulate 的关于直接下载的文档中的小注释中所解释的那样。更具体地说，由于我们没有使用构建器，而是从 CDN 下载库并使用脚本标签插入它们，因此所有组件名称必须是kebab-case。我们还需要创建一个 Vue 实例。

Vue.use(VueFormulate)

new Vue({
  el: '#app',
  data: function () {
    return {
      values: {}
    }
  }
})
<!DOCTYPE html>
<html>
  
<head>
<meta name="description" content="Vue-Formulate example">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vue Formulate</title>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.3.8/dist/formulate.min.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.3.8/dist/snow.css">
  
</head>

<body>
  <div id="app">
    <formulate-form v-model="values">
      <formulate-input
        type="password"
        name="password"
        label="Enter a new password">
      </formulate-input>
      <formulate-input
        type="password"
        name="password_confirm"
        label="Confirm your password"
        validation="required|confirm:password"
        validation_name="Password confirmation">
      <formulate-input
        type="submit"
        label="Change password">
      </formulate-form>
    </formulate-form>
    <p><strong>This is your password: {{ values }}</strong></p>      
  </div>
</body>
</html>

相同但使用 Schemas（请注意 Vue-Formulate 需要是 2.4 或更高版本）：

Vue.use(VueFormulate)

var app = new Vue({
  el: '#app',
  data: function () {
    return {
      values: {},
      schema: [
        {
          type: 'password',
          name: 'password',
          label: 'Enter a new password',
          validation: 'required'
        },
        {
          type: 'password',
          name: 'password_confirm',
          label: 'Confirm your password',
          validation: '^required|confirm:password',
          validationName: 'Password confirmation'
        },
        {
          type: 'submit',
          label: 'Change password'
        }
      ]
    }
  }
})
<!DOCTYPE html>
<html>

<head>
<meta name="description" content="Vue-Formulate example">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vue Formulate with Schema</title>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.4.1/dist/formulate.min.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.3.8/dist/snow.css">
  
</head>

<body>
  <div id="app">
    <formulate-form v-model="values" :schema="schema"/>
    <p><strong>This is your password: {{ values }}</strong></p>      
  </div>
</body>
</html>

推荐阅读