vue-form-json-schema icon indicating copy to clipboard operation
vue-form-json-schema copied to clipboard

VUE3 Uncaught (in promise) TypeError: this.$createElement is not a function

Open ikkysleepy opened this issue 3 years ago • 0 comments

I got this error when trying to use VUE3 with vue-form-json-schema.

Uncaught (in promise) TypeError: this.$createElement is not a function
    at Proxy.pe (vue-form-json-schema.esm.js?4897:1)
    at Proxy.Oe (vue-form-json-schema.esm.js?4897:1)
    at eval (vue-form-json-schema.esm.js?4897:1)
    at Proxy.reduce (<anonymous>)
    at Proxy.et (vue-form-json-schema.esm.js?4897:1)
    at Proxy.pt (vue-form-json-schema.esm.js?4897:1)
    at cb (vue-form-json-schema.esm.js?4897:1)
    at Proxy.Q (vue-form-json-schema.esm.js?4897:1)
    at Proxy.vfjsBusEventHandler (vue-form-json-schema.esm.js?4897:1)
    at eval (vue-form-json-schema.esm.js?4897:1)
antiphishing.js:9377 

I used the vue3 rewrite branch: https://github.com/jarvelov/vue-form-json-schema/tree/vue3rewrite and tried the simple example.

<template>
  <div id="example-one" class="container mb-3 mt-3">
    <h1>vue-form-json-schema</h1>
    <h3>
      Example #1
      <small class="text-muted">Minimal example</small>
    </h3>
    <p class="lead">
      <span>
        A minimal example showing a simple
        <code>input</code> field.
      </span>
    </p>
    <p class="text-center font-weight-bold">
      <a
        href="https://codesandbox.io/s/py6611pr9m"
        target="_blank"
        rel="noopener noreferrer"
        >Click here to edit this demo</a
      >
    </p>
    <p class="text-center font-weight-bold">
      <a
        href="https://py6611pr9m.codesandbox.io/"
        target="_blank"
        rel="noopener noreferrer"
        >Click here to show this demo in a separate window</a
      >
    </p>

    <vue-form-json-schema
      v-model="model"
      :schema="schema"
      :ui-schema="uiSchema"
      v-on:state-change="onChangeState"
      v-on:validated="onValidated"
    ></vue-form-json-schema>

    <hr />
  </div>
</template>

<script>
// Import VueFormJsonSchema
import VueFormJsonSchema from "vue-form-json-schema/dist/vue-form-json-schema.esm.js";
// We use a component to display JSON in a pretty way
// it is NOT included NOR required by VueFormJsonSchema
export default {
  name: "example-one",
  components: {
    "vue-form-json-schema": VueFormJsonSchema,
  },
  data() {
    return {
      model: {},
      state: {},
      valid: false,
      schema: {
        type: "object",
        properties: {
          firstName: {
            type: "string",
          },
        },
      },
      uiSchema: [
        {
          component: "input",
          model: "firstName",
          fieldOptions: {
            class: ["form-control"],
            on: ["input"],
            attrs: {
              placeholder: "Please enter your name",
            },
          },
        },
      ],
    };
  },
  methods: {
    onChangeState(value) {
      this.state = value;
    },
    onValidated(value) {
      this.valid = value;
    },
  },
};
</script>

ikkysleepy avatar Mar 30 '21 01:03 ikkysleepy