gwenaelp / vfg-field-array

A vue-form-generator field to handle arrays
MIT License
39 stars 24 forks source link

Unable to install the component #9

Closed pastorryanhayden closed 5 years ago

pastorryanhayden commented 5 years ago

I'm getting these two errors:

Unknown custom element: <field-array> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

and

TypeError: this.$refs.child.clearValidationErrors is not a function

My component looks like this:

import VueFormGenerator from "vue-form-generator";
import { FieldArray } from 'vfg-field-array';
import sections from "~/static/sections.json";
export default {
  layout: 'dashboard',
  components: {
    "vue-form-generator": VueFormGenerator.component,
    FieldArray 
  },
  data() {
    return {
      selectedSection: 0,
        selectedSubSection: null,
        sections: sections,
        formOptions: {
          validateAfterLoad: false,
          validateAfterChanged: false
    }
    }
  },
pastorryanhayden commented 5 years ago

This is what my Object looks like:

{
    "name": "Space Available",
    "model": {
      "floors": [null]
    },
    "schema": {
      "fields": [{
        "type": "array",
        "label": "Space Per Floor",
        "model": "floors",
        "showRemoveButton": false,
        "fieldClasses": "arrayEditor",
        "newElementButtonLabelClasses": "button is-primary",
        "items": {
          "type": "object",
          "default": {},
          "schema": {
            "fields": [{
              "type": "input",
              "inputType": "text",
              "label": "Floor Number",
              "model": "floor_number"
            }, {
              "type": "input",
              "inputType": "text",
              "label": "Common Area Fact",
              "model": "common_area_fact"
            }, {
              "type": "input",
              "inputType": "number",
              "label": "Ammount (Sq. Ft)",
              "model": "ammount_sq_ft"
            }]
          }
        }
      }]
    }
  }
pastorryanhayden commented 5 years ago

I'm using this in Nuxt if that helps.

pastorryanhayden commented 5 years ago

I figured it out. I had to install it as a plugin in the nuxt plugin folder:

plugins/vueformgen.js

import Vue from "vue";
import VueFormGenerator from "vue-form-generator";
import {FieldArray} from 'vfg-field-array';

Vue.component('VueFormGenerator', VueFormGenerator.component)
Vue.component('FieldArray', FieldArray);

Then register it in nuxt.config.js:

  plugins: [
    '~/plugins/vueformgen'

  ],