为vue-form-generator选择框填充动态数据时遇forEach未定义报错

我来帮你搞定这个问题，这个报错的根源其实是你在初始化表单字段时，this的指向出了问题。

问题原因拆解 #

当你在data对象里直接定义form_datos.fields时，这里的this并不是指向Vue实例——因为此时Vue实例还没完全创建完成，所以this.provincias会返回undefined。而vue-form-generator的select组件需要遍历values数组来生成下拉选项，对undefined调用forEach自然就抛出了这个错误。

两种可行解决方案 #

方案一：用计算属性定义表单字段

把form_datos改成计算属性，这样就能确保this正确指向Vue实例，顺利拿到provincias的数据：

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
    },
    dp_provincia: '' // 记得绑定对应的model值
  },
  computed: {
    form_datos() {
      return {
        fields:[
          // 其他字段保留原写法...
          {
            type: "select",
            label: "Provincia:",
            model: "dp_provincia",
            required:true,
            values: this.provincias, // 这里的this现在能正确访问到provincias
            validator:VueFormGenerator.validators.string,
            styleClasses:'col-md-6'
          }
          // 其他字段保留原写法...
        ]
      }
    }
  },
  created() {
    // 你的其他初始化逻辑
  }
})

方案二：在created钩子中动态赋值

如果不想用计算属性，可以在created钩子（此时Vue实例已经创建完成，this指向正确）里给select字段的values赋值：

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: [], // 先初始化空数组
          validator:VueFormGenerator.validators.string,
          styleClasses:'col-md-6'
        }
        // 其他字段保留原写法...
      ]
    },
    dp_provincia: ''
  },
  created() {
    // 找到对应的select字段，赋值values
    const provinciaField = this.form_datos.fields.find(field => field.model === 'dp_provincia')
    if (provinciaField) {
      provinciaField.values = this.provincias
    }
    // 你的其他初始化逻辑
  }
})

额外提醒 #

记得确保dp_provincia在data里有定义，因为form字段里的model需要对应到Vue实例的data属性上，否则表单绑定会失效。

内容的提问来源于stack exchange，提问作者Enzo Zapata