Использование Vue Formulate со схемой

Я пытаюсь запустить Vue Formulate, но ничего не получается. Вот мой код:

эта версия включает операторы импорта: https://vueformulate.com/guide/installation/

<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'

Благодарность!

Источник

1 ответ

Проблема частично связана с ограничениями DOM, как объясняется в небольшой заметке в документации Vue Formulate о прямых загрузках. Чтобы быть более конкретным, поскольку мы не используем компоновщик, а загружаем библиотеки из CDN и вставляем их с тегами сценария, все имена компонентов должны быть в кебаб-регистре. Нам также необходимо создать экземпляр 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>

То же самое, но со схемами (обратите внимание, что 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>

Источник
Другие вопросы по тегам