Populate vue-form-generator's select field with dynamic values

Question

i have a problem, i am trying to populate a select with data. Console errors:

vue.js:584 [Vue warn]: Error in render: "TypeError: Cannot read property 'forEach' of undefined"

Cannot read property 'forEach' of undefined

Vue.use(VueFormGenerator)
var app = new Vue({
 el: '#app',
  data:{
  ...
  provincias:[{id:"baires", name:"Buenos Aires"}],
  ...
  
,formOptions: {
  validationErrorClass: "has-error",
  validationSuccessClass: "has-success",
  validateAfterChanged: true
 }
,form_datos:{
  fields:[{
  ...
  {
      type: "select",
      label: "Provincia:",
      model: "dp_provincia",
      required:true,
      values: this.provincias, 
      validator:VueFormGenerator.validators.string,
      styleClasses:'col-md-6'
   }
  ...
 ]
 }
}
,created() {
  var res = VueFormGenerator.validators.resources;
  res.fieldIsRequired = "Este campo es requerido.";
 }
,methods:
bla bla bla

Why i dont do this?

values: [{id:"baires", name:"Buenos Aires"}]

instead of values: this.provincias ???

Because i want to populate the select with data that i get from a call to the api rest. These hard typed values are an example.

Fiddle: https://jsfiddle.net/1e3k87us/1/

Thanks

danh · Accepted Answer · 2020-04-07 16:50:15Z

3

Instead of poking into the vue, provide a function for the values prop....

data: function() {
  return {
    dynamicProvinces: [ 'default', 'provinces', 'here' ],
    form_datos: {
      fields: [
        {
          type: "select",
          label: "Provincia:",
          model: "dp_provincia",
          // provide a function for values...
          values: (model, schema) => {
            this.dynamicProvinces
          },
        }
      ]
    }
  }
},
created() {
    // set province values however you like, for example, from an API
    getProvincesAPI.then(provinces => {
      this.dynamicProvinces = provinces
    })
}

edited Apr 7, 2020 at 16:50

answered Apr 7, 2020 at 16:39

danh

62.7k10 gold badges100 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Enzo Zapata · Accepted Answer · 2018-02-01 14:26:43Z

2

Ok i solved it, you need to leave the values empty

{
 type: "select",
      label: "Provincia:",
      model: "dp_provincia",
      required:true,
      values: [], 
      validator:VueFormGenerator.validators.string,
      styleClasses:'col-md-6'
}

and you can access the values property from a method

var fiel=app.$root.form_datos.fields.find(field => field.model === 'dp_provincia');
fiel.values=[{id:"0", name:"example"}];

i think fiel.values=this.provincias; also will work

answered Feb 1, 2018 at 14:26

Enzo Zapata

1711 silver badge7 bronze badges

Collectives™ on Stack Overflow

Populate vue-form-generator's select field with dynamic values

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related