CODEWITHSUNDEEP
vue.jstemplatesschemavue-formulate
sdafadsf
sdafadsf

Reputation: 21

Using Vue Formulate with a schema

I try to get Vue Formulate running, but it just does not work. Here is my code:

this version includes the import statements: 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/[email protected]/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>

Opening the site results in the following error appearing in the console:

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'

Thanks!

Upvotes: 2

Views: 1369

Answers (1)

nunop
nunop

Reputation: 2207

The issue is due partially to DOM limitations, as explained in the small note in Vue Formulate's documentation on direct downloads. To be more specific, since we are not using a builder but downloading the libraries from a CDN and inserting them with script tags, all components names must be kebab-case. We also need to create a Vue instance.

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/[email protected]/dist/formulate.min.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@braid/[email protected]/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>

The same but with Schemas (please note that Vue-Formulate needs to be version 2.4 or above):

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/[email protected]/dist/formulate.min.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@braid/[email protected]/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>

Upvotes: 2

Related Questions